/* =========================================================================
   DESIGN TOKENS — One Hour Framing
   Palette contrast verified against WCAG 2.1 AA (all pairs >= 7.3:1).
   ========================================================================= */

:root {
  /* ---- Colour ---------------------------------------------------------- */
  --ink:          #0B0B0D;
  --ink-raised:   #141418;
  --ink-sunken:   #08080A;
  --ink-line:     #232329;
  --ink-line-2:   #2E2E36;

  --gilt:         #C9A227;   /* 8.13:1 on --ink  */
  --gilt-soft:    #E3C56A;   /* 11.67:1 on --ink */
  --gilt-deep:    #8A6E14;
  --gilt-glow:    rgba(201, 162, 39, .28);

  --linen:        #F4F1EA;   /* 17.43:1 on --ink */
  --linen-muted:  #A8A49B;   /* 7.91:1 on --ink  */
  --linen-dim:    #6E6B64;
  --oxblood:      #6B2028;
  --white:        #FFFFFF;

  --success:      #4E7C59;
  --error:        #C2564F;

  /* ---- Surfaces / glass ------------------------------------------------ */
  --glass-bg:     rgba(11, 11, 13, .72);
  --glass-bg-2:   rgba(20, 20, 24, .82);
  --glass-brd:    rgba(244, 241, 234, .10);
  --glass-hi:     rgba(255, 255, 255, .06);
  --blur:         saturate(160%) blur(20px);

  /* ---- Typography ------------------------------------------------------ */
  --ff-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --ff-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-hero:  clamp(2.75rem, 7vw, 6.5rem);
  --fs-h1:    clamp(2.25rem, 5vw, 4rem);
  --fs-h2:    clamp(1.75rem, 3.5vw, 2.75rem);
  --fs-h3:    clamp(1.25rem, 2vw, 1.6rem);
  --fs-body:  clamp(1rem, 1.1vw, 1.0625rem);
  --fs-sm:    .9375rem;
  --fs-xs:    .8125rem;
  --fs-eyebrow: .75rem;

  --lh-tight: 1.06;
  --lh-head:  1.16;
  --lh-body:  1.7;

  --ls-tight:   -.02em;
  --ls-eyebrow: .18em;

  /* ---- Space ----------------------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;

  --section-y: clamp(4rem, 9vw, 8.5rem);
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --maxw:      1280px;
  --maxw-text: 68ch;

  /* ---- Radius / borders ------------------------------------------------ */
  --r-sm: 3px;  --r-md: 6px;  --r-lg: 10px;  --r-xl: 16px;  --r-pill: 999px;
  --hairline: 1px solid var(--ink-line);
  --hairline-gilt: 1px solid rgba(201, 162, 39, .34);

  /* ---- Elevation (multi-layer, never single) --------------------------- */
  --sh-1: 0 1px 2px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.20);
  --sh-2: 0 1px 2px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.24),
          0 10px 22px rgba(0,0,0,.20);
  --sh-3: 0 1px 2px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.24),
          0 16px 34px rgba(0,0,0,.22), 0 34px 70px rgba(0,0,0,.20),
          inset 0 1px 0 var(--glass-hi);
  --sh-frame: 0 2px 4px rgba(0,0,0,.34), 0 8px 18px rgba(0,0,0,.28),
              0 22px 48px rgba(0,0,0,.26), 0 44px 88px rgba(0,0,0,.22),
              inset 0 1px 0 rgba(255,255,255,.07);
  --sh-gilt: 0 0 0 1px rgba(201,162,39,.34), 0 8px 30px rgba(201,162,39,.16);

  /* ---- Motion ---------------------------------------------------------- */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --t-fast:    160ms;
  --t-base:    260ms;
  --t-slow:    420ms;
  --t-page:    500ms;

  /* ---- Z-index scale (per ux rule `z-index-management`) ---------------- */
  --z-base:     1;
  --z-raised:   5;
  --z-sticky:   10;
  --z-header:   20;
  --z-dropdown: 300;
  --z-overlay:  999;
  --z-modal:    1000;
  --z-toast:    9999;
}

/* Respect user motion preference globally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}