/* ==========================================================================
   bryanelzey.com — Design System Tokens
   Single committed visual world: warm greige canvas + low-light charcoal.
   No dark-mode inversion. Every surface and color is painted explicitly.
   Reuse this file for any future page or brand asset in this system.
   ========================================================================== */

:root {
  /* ---- Color: dark band (hero, header, footer accents) ---- */
  --charcoal:            #111113;  /* hero/header ground, matches studio portrait */
  --charcoal-hairline:   #2C2A28;  /* hairlines on dark */
  --charcoal-border-alt: #48453F;  /* monogram box border */
  --charcoal-dot:        #484541;  /* metadata separator dot */
  --ivory:               #FBF9F5;  /* name on dark */
  --ivory-soft:          #F7F5F0;  /* monogram glyph */
  --stone:               #D5D2CA;  /* positioning text on dark */
  --stone-muted:         #96928B;  /* metadata, eyebrows on dark */
  --stone-nav:           #A7A39C;  /* nav links resting */
  --hero-text:           #EDEAE4;  /* hero base text color */

  /* ---- Color: light canvas (warm greige / espresso) ---- */
  --espresso:        #1A1918;  /* near-black text, accent bars, titles, figures */
  --espresso-soft:   #242321;  /* role and capability descriptions */
  --greige-base:     #ECEAE4;  /* page ground + alternating sections */
  --greige-surface:  #F2F0EB;  /* alternating sections */
  --greige-subtle:   #E4E2DC;  /* proof strip */
  --greige-border:   #D8D5CD;  /* hairlines, dividers */
  --umber-muted:     #6B6864;  /* labels, dates, secondary text */
  --umber-light:     #8E8B86;  /* tertiary text */
  --parchment:       #FAF9F6;  /* reserved light surface */

  /* ---- Typography: single family, hierarchy by weight/size/tracking ---- */
  --font-sans: "Hanken Grotesk", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* type scale: size / line-height / letter-spacing / weight */
  --display-size: 3.75rem;      --display-lh: 1.08;  --display-ls: -0.035em; --display-w: 400;
  --display-m-size: 2.25rem;    --display-m-lh: 1.15; --display-m-ls: -0.025em;
  --headline-lg-size: 2.5rem;   --headline-lg-lh: 1.15; --headline-lg-ls: -0.03em; --headline-lg-w: 400;
  --headline-lg-m-size: 1.75rem; --headline-lg-m-lh: 1.2; --headline-lg-m-ls: -0.02em;
  --headline-md-size: 1.5rem;   --headline-md-lh: 1.25; --headline-md-ls: -0.02em; --headline-md-w: 500;
  --headline-sm-size: 1.125rem; --headline-sm-lh: 1.35; --headline-sm-ls: -0.015em; --headline-sm-w: 500;
  --body-lg-size: 1.125rem;     --body-lg-lh: 1.6;  --body-lg-ls: -0.01em;
  --body-md-size: 0.9375rem;    --body-md-lh: 1.6;  --body-md-ls: -0.005em;
  --label-md-size: 0.75rem;     --label-md-lh: 1.4;  --label-md-ls: 0.06em;  --label-md-w: 500;
  --label-sm-size: 0.6875rem;   --label-sm-lh: 1.3;  --label-sm-ls: 0.08em;  --label-sm-w: 500;

  /* ---- Layout ---- */
  --content-max: 1180px;
  --gutter: 1.5rem;          /* mobile side gutter */
  --gutter-desktop: 2rem;
  --section-pad: 5rem;       /* mobile section rhythm */
  --section-pad-desktop: 7rem;
  --header-h: 5rem;          /* 80px mobile */
  --header-h-desktop: 6rem;  /* 96px desktop */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fade: 700ms;
  --duration-hover: 200ms;
}