/* =================================================================
   Mali Richlen Advisory — Design Tokens
   ----------------------------------------------------------------
   Single source of truth for color, type, spacing.
   Every page declares :root from this file.
   ================================================================= */

:root {
  /* --------------------------------------------------------------
     PALETTE
     Navy = structural, ~60% of pixel weight
     Camel = seasoning, ~5–10%; thin rules, eyebrows, hover, CTA fill
     Forest = advisory-only differentiator; section eyebrows + links
     Cream / paper / ivory = warm light grounds (no stark white)
     -------------------------------------------------------------- */
  --navy:        #1F2A44;
  --navy-ink:    #16203A;     /* deeper navy, used for hover + dense body */
  --camel:       #C6A76E;
  --camel-deep:  #A88848;     /* deeper camel for italic accents on light */
  --forest:      #0F4D3F;     /* advisory-only accent */
  --forest-deep: #0A3A2F;
  --cream:       #F5F0E6;     /* main body-section ground */
  --cream-warm:  #EFE7D7;     /* warmer cream for closing bands */
  --paper:       #FBF7EE;     /* dominant page ground */
  --ivory:       #FAF6EC;     /* card surface, sits on paper or cream */
  --white:       #FFFFFF;     /* rarely used — stark contrast moments only */

  /* Functional alphas */
  --line:        rgba(31, 42, 68, 0.16);
  --line-soft:   rgba(31, 42, 68, 0.10);
  --muted:       rgba(31, 42, 68, 0.70);

  /* --------------------------------------------------------------
     TYPE
     Display: Playfair Display (Google Fonts) — italic for accents
     Body: Switzer (Fontshare)
     -------------------------------------------------------------- */
  --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --body:    "Switzer", "Söhne", "Helvetica Neue", Arial, sans-serif;

  /* --------------------------------------------------------------
     TYPE SCALE (responsive via clamp)
     -------------------------------------------------------------- */
  --fs-display-xl: clamp(54px, 7.6vw, 116px);   /* Home hero H1 */
  --fs-display-l:  clamp(40px, 4.8vw, 72px);    /* page H1, large section H2 */
  --fs-display-m:  clamp(30px, 3.2vw, 48px);    /* CTA band H2, mid display */
  --fs-display-s:  clamp(22px, 2vw, 30px);      /* italic camel sublines */
  --fs-body-l:     clamp(17px, 1.18vw, 19px);   /* hero body, intro lede */
  --fs-body:       16.5px;                      /* default body */
  --fs-small:      14px;
  --fs-eyebrow:    11.5px;                      /* tracked-out eyebrows */

  /* --------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------- */
  --gutter:        clamp(20px, 4vw, 56px);      /* container side padding */
  --nav-extra:     clamp(24px, 4vw, 56px);      /* extra right pad in nav */
  --read-max:      720px;                       /* article body width */
  --container-max: 1320px;                      /* main container */
  --rail-col:      56px;                        /* left-column rail width */

  /* Reveal animation timing */
  --reveal-dur:    700ms;
  --reveal-ease:   ease;

  /* Hover timing */
  --hover-fast:    200ms ease;
  --hover-med:     280ms ease;
}

/* --------------------------------------------------------------
   BREAKPOINTS (for reference only; CSS uses @media literals)
   -------------------------------------------------------------- */
/*
  --bp-wide:    1100px;   collapse: 4-card framework → 2x2; intro-side hides
  --bp-tablet:   900px;   case-study grids → single column
  --bp-mobile:   820px;   nav → hamburger, rail hides, columns stack
*/