/* ==========================================================================
   PKS INDIA LEGAL LLP — Design tokens
   Every colour below was pixel-sampled from the firm's 47-page corporate
   profile (PSK.pdf). Every contrast pair is measured, not estimated —
   see tools/tokens-test.html, which recomputes them from this file at runtime.

   NOTE ON THEMING: this site deliberately commits to a single visual world.
   The brown/gold/ivory identity IS the brand; there is no dark-mode variant
   and no prefers-color-scheme block. Colours are literal and unconditional.
   ========================================================================== */

:root {

  /* ---- Brand, sampled from the profile ---------------------------------- */
  --brown:           #503113;   /* cover, dividers, metrics band, footer     */
  --brown-dark:      #301B0A;   /* deepest panels, overlays, solid header    */
  --brown-mid:       #6C441F;   /* hover states, hairlines on dark           */
  --gold:            #EBC561;   /* primary gold — panels, large display type */
  --gold-deep:       #E3B953;   /* vision panel, button fill                 */
  --gold-ink:        #8A6018;   /* gold for SMALL text on light — 5.17:1     */
  --cream:           #F7EFD9;   /* body text and numerals on brown           */
  --ivory:           #FAF6EF;   /* light section ground                      */
  --white:           #FFFFFF;
  --charcoal:        #26201A;   /* body text on light                        */
  --brown-ink:       #5A3616;   /* headings on light                         */
  --muted:           #6B6157;   /* secondary text on light                   */

  /* ---- Semantic surface + ink roles ------------------------------------- */
  --surface-dark:    var(--brown-dark);
  --surface-brown:   var(--brown);
  --surface-gold:    var(--gold);
  --surface-light:   var(--ivory);
  --surface-white:   var(--white);

  --ink-on-dark:     var(--cream);
  --ink-on-dark-2:   #C6B393;   /* secondary text on brown — measured 5.74:1 */
  --ink-on-light:    var(--charcoal);
  --ink-on-light-2:  var(--muted);
  --ink-on-gold:     var(--brown-dark);

  --accent-on-dark:  var(--gold);      /* gold is unrestricted on brown      */
  --accent-on-light: var(--gold-ink);  /* small gold text on light           */

  /* ---- Rules and hairlines ---------------------------------------------- */
  --rule-on-dark:    rgba(247, 239, 217, .18);
  --rule-on-light:   rgba(80, 49, 19, .16);
  --rule-soft:       rgba(80, 49, 19, .08);
  --rule-gold:       var(--gold);

  /* ---- Type families ----------------------------------------------------
     Display  : Archivo variable (wdth axis) — the profile's wide, flat-
                terminal grotesk caps.
     Text     : Plus Jakarta Sans 400/700 — geometric, double-storey 'a'.
     Accent   : Cormorant Garamond 300 italic — milestone years, pull quotes.
     Four font files total. Every stack carries a real fallback.            */
  --font-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-accent:  "Cormorant Garamond", Georgia, "Times New Roman", Times, serif;
  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---- Display width axis (guarded by @supports in base.css) ------------ */
  --wdth-display: 118;
  --wdth-hero:    122;

  /* ---- Fluid type scale -------------------------------------------------- */
  --fs-hero:    clamp(2.6rem, 7vw, 6rem);
  --fs-h1:      clamp(2.25rem, 5vw, 4rem);
  --fs-h2:      clamp(1.9rem, 3.6vw, 3.1rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.6rem);
  --fs-h4:      clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.0625rem);
  --fs-lede:    clamp(1.08rem, 1.5vw, 1.25rem);
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.75rem;
  --fs-numeral: clamp(3.5rem, 9vw, 8rem);

  --lh-display: 0.94;
  --lh-heading: 1.12;
  --lh-body:    1.7;

  --tracking-display: 0.012em;
  --tracking-eyebrow: 0.2em;
  --tracking-label:   0.13em;

  /* ---- Spacing — 8px base ------------------------------------------------ */
  --sp-1:  0.5rem;   /*  8 */
  --sp-2:  1rem;     /* 16 */
  --sp-3:  1.5rem;   /* 24 */
  --sp-4:  2rem;     /* 32 */
  --sp-5:  2.5rem;   /* 40 */
  --sp-6:  3.5rem;   /* 56 */
  --sp-7:  4.5rem;   /* 72 */
  --sp-8:  6rem;     /* 96 */

  --section-block: clamp(4.5rem, 9vw, 9.25rem);
  --gutter:        clamp(1.25rem, 5vw, 3.5rem);

  /* ---- Measure and containers -------------------------------------------- */
  --container:   1280px;
  --container-w: 1480px;   /* wide/full-bleed content rail */
  --measure:     68ch;
  --measure-tight: 56ch;

  /* ---- Geometry ----------------------------------------------------------
     Radius is 0 by design. The only curved forms in this identity are the
     profile's chamfered parallelogram brand marks, built with clip-path.  */
  --radius: 0;
  --border-hairline: 1px;

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out:  cubic-bezier(.2, .7, .3, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --dur-fast:   180ms;
  --dur-mid:    360ms;
  --dur-reveal: 600ms;
  --dur-count:  1600ms;
  --stagger:    60ms;

  /* ---- Layering ----------------------------------------------------------- */
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    100;
  --z-header:    200;
  --z-mega:      300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-skiplink:  600;

  /* ---- Header metrics ------------------------------------------------------ */
  --header-h:        84px;
  --header-h-scroll: 68px;
  --header-h-mobile: 64px;
}

/* NAV BREAKPOINT — see layout.css and main.js. */
@media (max-width: 1200px) {
  :root { --header-h: var(--header-h-mobile); --header-h-scroll: var(--header-h-mobile); }
}