/* =============================================================================
   DARSHI SHAH — PORTFOLIO DESIGN TOKENS
   Single source of truth. Every page and case study reads from these variables.
   Change a value here and it propagates everywhere. Do not hardcode values in
   page CSS — always reference a token (var(--token-name)).

   Extracted from: "Darshi Shah - Hero (Clean, standalone)".
   ========================================================================== */

:root {

  /* ───────────────────────── COLOR ───────────────────────── */

  /* surface */
  --color-paper:        #F6F1E8;   /* warm paper background, the base of everything */
  --color-surface:      #FFFFFF;   /* white the page fades into below the hero */
  --color-card:         #FBF9F4;   /* project / image placeholder fill */
  --color-card-border:  #ECE6DA;   /* hairline border on cards */
  --color-hatch:        #F1ECE1;   /* diagonal hatch lines inside placeholders */

  /* ink (text) */
  --color-ink:          #1F1F1F;   /* headlines + primary UI text */
  --color-ink-strong:   #0A0A0A;   /* hover / emphasis ink */
  --color-ink-sub:      #4A4A4A;   /* body copy / descriptions */
  --color-ink-muted:    #8A8377;   /* labels, captions, meta */

  /* orb palette (the animated atmosphere). Two page variants:
     the home field, and a softer/warmer field used by the interior pages. */
  --color-orb-a:        #F0887F;   /* coral — home  */
  --color-orb-b:        #F4A65E;   /* amber — home  */
  --color-orb-c:        #F3CE7A;   /* gold  — home  */
  /* warm variant — About / Publications / How-I-use-AI run a softer field */
  --color-orb-warm-a:   #F3B074;   /* warm coral  */
  --color-orb-warm-b:   #EDA39C;   /* warm rose   */
  --color-orb-warm-c:   #F1C76E;   /* warm gold   */

  /* accent (pulled from the orb palette) */
  --color-accent:       #F4A65E;   /* felt-tip marker + cursor orb + selection accent */
  --color-emph:         #C2603A;   /* warm terracotta — link / wordmark hover emphasis */
  --color-focus:        #C2603A;   /* keyboard-focus outline: burnt orange, 3.7:1 on paper (accent orange fails at 1.8:1) */
  --color-live:         #57A15E;   /* "available" status indicator (footer pulse dot) */

  /* selection + utility */
  --color-selection:    rgba(31, 31, 31, 0.12);
  --color-rule:         rgba(35, 32, 41, 0.18);   /* thin dividers */


  /* ───────────────────────── TYPOGRAPHY ───────────────────────── */

  /* families */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;  /* headings + UI */
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:   'Noto Serif', Georgia, serif;  /* italic publication / institution accents */

  /* ── BODY FONT ── decided July 2026: Hanken Grotesk. RULES 2.5 closed.
     Losing candidates (Geist, Source Sans 3) and their font <link> weights
     have been dropped. */
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;

  /* weights
     Headings are smaller now, so they lean on weight (not size) for presence.
     --weight-head stays the UI default (nav, buttons, meta, card titles, inline
     strong). The two heavier tokens are reserved for display headings. */
  --weight-body:    400;
  --weight-head:    500;   /* UI text + small headings */
  --weight-h2:      600;   /* section / subsection headings (semibold) */
  --weight-hero:    700;   /* the big h1 — bold, anchors the page */
  --weight-serif-display: 500;   /* large italic serif pieces (numerals, display
                                    accents) use 500i so they don't go heavy at
                                    size — the one sanctioned extra weight */

  /* font sizes — fluid where the original used clamp(), fixed elsewhere.
     Headers were retuned down ~25%: more restrained, carried by weight above. */
  --text-hero:      clamp(30px, 4vw, 54px);    /* h1 headline — the page hero */
  --text-subhero:   clamp(28px, 3.4vw, 44px);  /* page-opener headline that sits
                       below full-hero scale (e.g. About's opening h1): 600 weight,
                       not the 700 hero treatment */
  --text-lead:      clamp(18px, 1.6vw, 22px);  /* hero description / lead paragraph */
  --text-h2:        clamp(26px, 2.9vw + 8.5px, 34px);  /* section / case-study heading —
                       anchored to the shipped home-page look: 26px at ≤600px,
                       34px at ≥880px, fluid between (no stepped sizes) */
  --text-h3:        clamp(18px, 1.5vw, 21px);  /* subsection heading */
  --text-title:     18px;                      /* card title, small heading */
  --text-numeral:   clamp(34px, 3.5vw, 44px);  /* display serif numerals —
                       publication indices, pillar numbers (TYPOGRAPHY.md 1.3) */
  --text-body:      17px;                      /* default running text / wordmark */
  --text-meta:      16px;                      /* case-study meta value / small display line */
  --text-small:     14px;                      /* nav, captions, card subtitle */
  --text-caption:   13px;                      /* small captions: award/figure captions, mock body */
  --text-label:     12px;                      /* small mono UI labels: sidenav, eyebrows, spec cells */
  --text-eyebrow:   11px;                      /* uppercase mono label */

  /* case-study opener — shared across all four case studies (cover title + summary) */
  --text-case-title:   40px;                   /* .case-title — the case-study cover headline */
  --text-case-summary: 20px;                   /* .case-summary — the one-line deck under it */

  /* footer (site-footer primitive) closing band. A couple of sizes sit above the
     page scale; heading/em are clamp() so they never step inside a media query
     (RULES 2.3). link/label are fixed small labels, tokenised so no page CSS
     carries the raw px. */
  --text-footer-heading: clamp(29px, 4vw + 11px, 46px);  /* was 46/34/29 stepped */
  --text-footer-em:      clamp(27px, 3.7vw + 11px, 43px); /* italic serif accent */
  --text-footer-label:   12px;                 /* status + copyright mono labels */
  --text-15:             15px;                 /* small links / labels: footer nav, hero name tooltip */

  /* line heights */
  --leading-tight:  1.08;   /* hero headline */
  --leading-snug:   1.3;
  --leading-normal: 1.45;
  --leading-relaxed:1.6;    /* body copy */

  /* letter spacing */
  --tracking-tight:  0.005em;  /* headings / UI */
  --tracking-normal: 0.002em;  /* body */
  --tracking-hero:   0.016em;  /* the big h1 */
  --tracking-eyebrow:0.14em;   /* uppercase mono labels */
  --tracking-numeral:-0.01em;  /* the ONE sanctioned negative: large display
                                  serif numerals only (RULES 2.4 exception) */


  /* ───────────────────────── SPACING ───────────────────────── */
  /* 4px base scale */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   28px;
  --space-7:   36px;
  --space-8:   48px;
  --space-9:   56px;    /* the page gutter rhythm */
  --space-10:  72px;
  --space-11:  96px;
  --space-12:  120px;   /* large section bottom padding */

  /* semantic spacing */
  --gutter:        var(--space-9);   /* horizontal page padding (desktop) */
  --gutter-mobile: var(--space-5);   /* horizontal page padding (<=880px) */
  --section-gap:   var(--space-12);


  /* ───────────────────────── LAYOUT ───────────────────────── */
  /* Readable measure — applies to BODY TEXT ONLY. Anything that is not body
     text (cards, images, sections, diagrams, video, tables, etc.) is free to
     break past 660px and span the full content column.

     Three tiers. ANY max-width on a text block must reference one of these —
     never a raw px/ch value. Pages that need a different feel pick a tier;
     retuning a tier retunes it everywhere.
       narrow  → hero descriptions, intro leads
       default → running body copy
       wide    → pull quotes, wide lists, principle blocks */
  --maxw-text-narrow: 540px;
  --maxw-text:        660px;
  --maxw-text-wide:   760px;
  --maxw-headline: 1080px;   /* hero headline wrap width */
  --maxw-content:  1180px;   /* projects grid / main content column */
  --maxw-page:     1180px;   /* hard ceiling for any full-bleed content band */
  --grid-gap:      56px 48px;/* row-gap col-gap for the 2-up project grid */

  /* Image width variants — content images declare their width with a variant
     class (.img--full / .img--3q in base.css), never with ad-hoc page CSS.
     Full = 100% of the content column. Three-quarter = this token, centred.
     .img--3q relaxes back to full width on phones (600px). */
  --img-width-3q:  75%;


  /* ───────────────────────── ACCESSIBILITY ─────────────────────────
     Tokens that keep the site usable by keyboard, screen reader, and touch.
     The base.css focus / skip-link / touch-target rules read from these. */
  --focus-ring:        var(--color-focus);   /* keyboard focus outline — burnt orange, meets 3:1 (RULES 6.3) */
  --focus-ring-width:  2px;                   /* focus outline thickness */
  --focus-ring-offset: 3px;                   /* gap between outline and element */
  --tap-min:           44px;   /* min hit area for any tappable control (WCAG 2.5.5) */
  --scroll-offset:     var(--space-10);  /* space above an in-page #anchor target */


  /* ───────────────────────── RADIUS ───────────────────────── */
  --radius-xs:      4px;   /* small UI: focus ring, skip link */
  --radius-sm:      8px;   /* mock/card inner elements (chat bubbles, inset frames) */
  --radius-img-sm:  4px;   /* subtle image rounding: card-grid thumbnails,
                              small inline shots */
  --radius-img:     12px;  /* the rounded content-image look — case-study /
                              about-page figures. Every standalone content
                              image uses one of these two image tokens.
                              Never hardcode a radius on an image. */
  --radius-md:      16px;  /* glass tooltip / larger panels */
  --radius-lg:      20px;  /* liquid-glass content cards (about/currently) */
  --radius-xl:      24px;  /* large framed diagram/illustration panels (e.g. the LendSight build-loop canvas). Content images use --radius-img (12px) per 4.1. */
  --radius-pill:    999px; /* buttons / chips */


  /* ───────────────────────── SHADOW & BLUR ───────────────────────── */
  --shadow-glass:
    0 16px 36px -10px rgba(40, 30, 60, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -8px 18px -10px rgba(255, 255, 255, 0.4);
  --shadow-soft:  0 1px 4px rgba(0, 0, 0, 0.12);

  --blur-orb:     100px;   /* ambient orbs */
  --blur-cursor:  42px;    /* cursor-following orb */
  --blur-glass:   16px;    /* backdrop blur on glass surfaces */


  /* ───────────────────────── ATMOSPHERE ───────────────────────── */
  --grain-opacity:     0.10;   /* film-grain strength */
  --vignette-opacity:  0.00;   /* photographic vignette strength */


  /* ───────────────────────── MOTION ───────────────────────── */
  --ease-rise:   cubic-bezier(.2, .7, .2, 1);    /* entrance rise */
  --ease-glass:  cubic-bezier(.2, .85, .25, 1);  /* tooltip / pop */
  --ease-std:    ease;

  --dur-fast:    0.22s;
  --dur-base:    0.3s;
  --dur-slow:    1s;     /* hero entrance */

  /* ambient orb loop durations */
  --orb-dur-a:   12s;
  --orb-dur-b:   15s;
  --orb-dur-c:   18s;


  /* ───────────────────────── Z-INDEX ───────────────────────── */
  --z-atmos:     0;   /* orb field */
  --z-fade:      1;   /* white fade */
  --z-grain:     2;   /* film grain */
  --z-cursor:    3;   /* cursor orb (above fade) */
  --z-content:   5;   /* hero text, nav, content */
  --z-tooltip:   20;  /* glass tooltip */


  /* ───────────────────────── BREAKPOINTS ─────────────────────────
     CSS can't use vars in media queries, so these are documentation only —
     the literal px values below MUST be reused verbatim in every @media block
     so the whole site breaks at the same widths. The base styles are
     desktop-leaning; breakpoints peel off layout in stages so iPad keeps a real
     tablet layout instead of dropping straight to the phone view.

       --bp-wide:    1180px   content stops growing; centred with side gutters
       --bp-mobile:    880px   gutters → mobile, section padding tightens;
                               heavy multi-column layouts may relax
       --bp-nav:       760px   nav collapses to icon-only. Sits just under the
                               smallest iPad (768px) so every iPad keeps text
                               labels; only phones get icons
       --bp-small:     600px   phones: 2-up grids stack to one column,
                               tightest gutters

     Rules every page follows:
       • Wrap content in .container (max-width var(--maxw-content), auto margins)
         so nothing runs edge-to-edge past --bp-wide.
       • Horizontal padding switches --gutter → --gutter-mobile at 880px.
       • Type scales fluidly via the clamp() sizes above; don't add px font
         sizes inside media queries — retune the clamp() instead.
       • Multi-column grids stay 2-up through tablet and collapse to one column
         at 600px (not 880 — that strands iPad on a single column).
       • Media in content (img, video, iframe, svg) is fluid by default
         (see base.css: max-width:100%; height:auto). Never set fixed px widths
         that exceed the viewport. */
}