/* ============================================================
   Shams Convention — Design tokens
   Frozen from the "Architectural Neo-Future" Stitch design system.

   This file declares custom properties and nothing else. Every other
   stylesheet reads from here; none of them hard-code a colour or size.
   ============================================================ */

:root {
  /* ---------- Surface ------------------------------------- */
  --surface:            #FCF9F8;
  --surface-lowest:     #FFFFFF;
  --surface-low:        #F6F3F2;
  --surface-container:  #F0EDED;
  --surface-high:       #EAE7E7;
  --surface-variant:    #E5E2E1;
  --marble-white:       #F9F9F9;

  /* ---------- Ink ----------------------------------------- */
  --on-surface:         #1B1C1C;
  --on-surface-variant: #454841;
  --outline:            #757870;
  --outline-variant:    #C5C7BE;

  /* ---------- Brand --------------------------------------- */
  --primary:            #555F4E;   /* sage — 6.7:1 on white, safe for buttons */
  --primary-container:  #6E7865;
  --on-primary:         #FFFFFF;
  --sage-tint:          #848E7B;

  /* Bronze is split by contrast, not by taste. Measured on --surface:
       --bronze      3.31:1 — legal for LARGE text only (>=24px, or >=18.7px bold)
       --bronze-deep 6.40:1 — legal everywhere, incl. body copy and small labels
     Using --bronze on small text is a WCAG AA failure. Use --bronze-deep. */
  --bronze:             #B37E5F;
  --bronze-deep:        #7F5135;
  --bronze-wash:        rgba(179, 126, 95, .10);

  /* WhatsApp green, darkened for contrast. Measured against white text:
       #25D366  brand green   1.98:1  — unusable
       #1FA855  (was in use)  3.09:1  — fails AA for 14px
       #188141  this value    4.94:1  — passes
     Same hue and saturation as before, only darker, so it still reads as
     WhatsApp. Buttons here are 14px semibold, which is not "large text",
     so 3:1 is not the applicable threshold — 4.5:1 is. */
  --wa:                 #188141;
  --wa-hover:           #146B36;
  --wa-shadow:          rgba(24, 129, 65, .28);

  /* ---------- Glass --------------------------------------- */
  --glass-fill:         rgba(255, 255, 255, .55);
  --glass-fill-strong:  rgba(255, 255, 255, .72);
  --glass-border:       rgba(255, 255, 255, .40);
  --glass-bevel:        rgba(255, 255, 255, .80);
  --blur-glass:         24px;

  /* ---------- Type ---------------------------------------- */
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Fluid. The Stitch files pin display type at 64px, which overflows a
     360px viewport; these scale instead of breaking. */
  --fs-display:     clamp(2.5rem, 1.6rem + 4.5vw, 4rem);      /* 40 -> 64 */
  --fs-headline:    clamp(2rem, 1.6rem + 2vw, 2.5rem);        /* 32 -> 40 */
  --fs-title:       clamp(1.25rem, 1.1rem + .75vw, 1.5rem);   /* 20 -> 24 */
  --fs-body-lg:     1.125rem;
  --fs-body:        1rem;
  --fs-small:       .875rem;
  --fs-label:       .75rem;

  --lh-tight:       1.1;
  --lh-snug:        1.25;
  --lh-body:        1.6;
  --ls-display:     -.02em;
  --ls-headline:    -.01em;
  --ls-label:       .12em;

  --fw-regular:     400;
  --fw-semibold:    600;
  --fw-bold:        700;

  /* ---------- Space (8px base) ---------------------------- */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 40px;  --s-6: 48px;  --s-8: 64px;  --s-10: 80px;

  --gutter:         24px;
  --margin-page:    clamp(20px, 5vw, 64px);
  --container:      1440px;
  --measure:        68ch;                              /* readable line length */
  --section-gap:    clamp(4rem, 7vw, 8rem);
  --header-h:       72px;

  /* ---------- Shape --------------------------------------- */
  --r-sm:   .25rem;
  --r:      .5rem;
  --r-lg:   1rem;
  --r-xl:   1.5rem;
  --r-full: 9999px;

  /* ---------- Depth ---------------------------------------
     Light and refraction, never a black drop shadow. Shadows are
     tinted with sage so they never read as muddy grey. */
  --shadow-ambient: 0 4px 40px rgba(85, 95, 78, .06);
  --shadow-lift:    0 20px 60px -15px rgba(85, 95, 78, .18);
  --shadow-header:  0 1px 24px rgba(85, 95, 78, .08);
  --glow:           0 0 60px 5px rgba(85, 95, 78, .05);
  --bevel:          inset 1px 1px 0 0 var(--glass-bevel);

  /* ---------- Motion --------------------------------------
     Duration is only half the feel. The old --ease-out was an expo curve,
     cubic-bezier(.16, 1, .3, 1), which spends ~90% of the distance in the
     first ~30% of the run — so even a 700ms reveal *read* as a snap with a
     long tail. A cubic ease-out spreads the movement across the whole
     duration, which is what actually makes this feel unhurried. */
  --ease:      cubic-bezier(.4, 0, .2, 1);
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --dur-fast:  280ms;
  --dur:       580ms;
  --dur-slow:  1000ms;

  /* ---------- Layers -------------------------------------- */
  --z-marble:  -1;
  --z-header:  100;
  --z-drawer:  200;
  --z-lightbox:300;
  --z-dock:    150;
}