/* ============================================================
   GLS — Design Tokens
   Palette, type, scale, motion. The single source of truth.
   ============================================================ */

:root {
  /* --- Surfaces / ground -------------------------------- */
  --cream:        #FAF9F7;   /* base */
  --cream-dim:    #F2EFEB;   /* recessed sections */
  --cream-deep:   #E8E3D9;   /* recessed-er, mat-paper */
  --bone:         #DDD7CC;   /* rule lines, dividers */

  /* --- Brand inks --------------------------------------- */
  --green:        #36643B;   /* primary */
  --green-deep:   #1F3A22;   /* hover / pressed */
  --green-mist:   rgba(54, 100, 59, 0.08);   /* atmospheric */
  --navy:         #1A2332;   /* depth, dark moments */
  --navy-deep:    #0F1620;   /* footer wells */

  /* --- Type inks ---------------------------------------- */
  --ink:          #1A1A1A;   /* body text (not pure black) */
  --ink-soft:     #3A3A3A;   /* secondary text */
  --ink-mute:     #6B6B6B;   /* meta, captions */
  --ink-faint:    #A09A8E;   /* deep-meta, hairline labels */

  /* --- Type families ------------------------------------ */
  --font-display: "Roboto Serif", "Times New Roman", Georgia, serif;
  --font-body:    "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* --- Type scale (fluid) ------------------------------- */
  --t-hero:       clamp(2.75rem, 6.5vw, 7.5rem);    /* 44 → 120 */
  --t-display:    clamp(2.25rem, 4.5vw, 4.5rem);    /* 36 → 72 */
  --t-h1:         clamp(2rem, 3.5vw, 3.5rem);       /* 32 → 56 */
  --t-h2:         clamp(1.5rem, 2.4vw, 2.25rem);    /* 24 → 36 */
  --t-h3:         clamp(1.25rem, 1.6vw, 1.5rem);    /* 20 → 24 */
  --t-body-lg:    1.1875rem;                         /* 19 */
  --t-body:       1.0625rem;                         /* 17 */
  --t-meta:       0.875rem;                          /* 14 */
  --t-mono:       0.8125rem;                         /* 13 */
  --t-mono-sm:    0.6875rem;                         /* 11 */

  /* --- Spacing (8px rhythm) ----------------------------- */
  --s-1:   0.25rem;     /*  4 */
  --s-2:   0.5rem;      /*  8 */
  --s-3:   0.75rem;     /* 12 */
  --s-4:   1rem;        /* 16 */
  --s-5:   1.5rem;      /* 24 */
  --s-6:   2rem;        /* 32 */
  --s-7:   3rem;        /* 48 */
  --s-8:   4rem;        /* 64 */
  --s-9:   6rem;        /* 96 */
  --s-10:  8rem;        /* 128 */
  --s-11:  10rem;       /* 160 */

  /* --- Section rhythm ----------------------------------- */
  --section-pad-y:  clamp(4rem, 9vw, 10rem);
  --section-pad-x:  clamp(1.25rem, 5vw, 4rem);
  --container-max:  88rem;        /* 1408px */
  --measure:        38rem;        /* readable line-length */
  --measure-narrow: 28rem;

  /* --- Motion ------------------------------------------- */
  --ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1:       180ms;
  --dur-2:       320ms;
  --dur-3:       560ms;
  --dur-4:       880ms;

  /* --- Rules / borders ---------------------------------- */
  --rule-hair:   1px solid var(--bone);
  --rule-thin:   1px solid var(--green);
  --rule-thick:  2px solid var(--green);

  /* --- Shadow / depth (used sparingly) ------------------ */
  --depth-1:     0 1px 2px rgba(26, 26, 26, 0.04);
  --depth-2:     0 6px 24px rgba(26, 26, 26, 0.06);
  --depth-glow:  0 0 0 6px var(--green-mist);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-4: 0ms;
  }
}