/* ==========================================================================
   Negotium Agon — Design Tokens
   The single source of truth for colour, type, space, radius, shadow, motion.
   Preserves the original identity: charcoal + gold, Cormorant Garamond + Inter.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --gold:            #d4af37;
  --gold-bright:     #f0d878;
  --gold-deep:       #8b6f1f;
  --gold-soft:       rgba(212, 175, 55, 0.08);
  --gold-softer:     rgba(212, 175, 55, 0.04);

  /* --- Surfaces --------------------------------------------------------- */
  --bg:              #0a0a0a;
  --surface-1:       #0d0d0d;
  --surface-2:       #111111;
  --surface-3:       #161616;
  --surface-4:       #1c1c1c;
  --scrim:           rgba(6, 6, 6, 0.82);

  /* --- Lines ------------------------------------------------------------ */
  --line:            rgba(212, 175, 55, 0.18);
  --line-strong:     rgba(212, 175, 55, 0.40);
  --line-neutral:    rgba(245, 241, 232, 0.10);

  /* --- Ink -------------------------------------------------------------- */
  --ink:             #f5f1e8;
  --ink-mute:        #9a958c;
  --ink-faint:       #858075;  /* 5.04:1 on --bg — was #5a554d at 2.68:1 */

  /* --- Feedback (admin) ------------------------------------------------- */
  --ok:              #5fb87a;
  --ok-bg:           rgba(95, 184, 122, 0.12);
  --warn:            #e0a84a;
  --danger:          #e0655f;
  --danger-bg:       rgba(224, 101, 95, 0.12);

  /* --- Type ------------------------------------------------------------- */
  --display:         'Cormorant Garamond', 'Times New Roman', serif;
  --body:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid display scale — min at 360px viewport, max at 1400px */
  --t-hero:          clamp(3.25rem, 11vw, 12.5rem);
  --t-d1:            clamp(2.75rem, 7.5vw, 8.125rem);
  --t-d2:            clamp(2.25rem, 5.5vw, 5.5rem);
  --t-d3:            clamp(1.75rem, 3.4vw, 3.5rem);
  --t-d4:            clamp(1.5rem, 2.4vw, 2.25rem);

  /* Body scale — fixed steps, no fluid wobble on small text */
  --t-lead:          clamp(1.0625rem, 1.5vw, 1.375rem);
  --t-base:          1rem;
  --t-sm:            0.9375rem;
  --t-xs:            0.8125rem;
  --t-2xs:           0.6875rem;

  --lh-tight:        0.95;
  --lh-snug:         1.15;
  --lh-normal:       1.6;
  --lh-relaxed:      1.7;

  --track-label:     0.28em;   /* uppercase micro-labels */
  --track-tight:     -0.01em;  /* large display headings */

  /* --- Space (4px base) ------------------------------------------------- */
  --s-1:  0.25rem;  --s-2:  0.5rem;   --s-3:  0.75rem;  --s-4:  1rem;
  --s-5:  1.25rem;  --s-6:  1.5rem;   --s-8:  2rem;     --s-10: 2.5rem;
  --s-12: 3rem;     --s-16: 4rem;     --s-20: 5rem;     --s-24: 6rem;
  --s-32: 8rem;

  /* Section rhythm — collapses on small screens via media query below */
  --section-y:       clamp(4.5rem, 9vw, 8.75rem);
  --section-x:       clamp(1.25rem, 4vw, 2.5rem);
  --gutter:          clamp(1.25rem, 4vw, 2.5rem);

  /* --- Containers ------------------------------------------------------- */
  --container:       87.5rem;  /* 1400px — matches original */
  --container-text:  46rem;    /* readable prose measure */

  /* --- Radius ----------------------------------------------------------- */
  /* The public site is intentionally sharp-cornered; only pills are round. */
  --r-none:          0;
  --r-sm:            3px;
  --r-md:            6px;
  --r-lg:            10px;
  --r-pill:          999px;

  /* --- Shadow ----------------------------------------------------------- */
  --sh-sm:           0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md:           0 8px 28px rgba(0, 0, 0, 0.45);
  --sh-lg:           0 24px 70px rgba(0, 0, 0, 0.6);
  --sh-gold:         0 10px 44px rgba(212, 175, 55, 0.16);

  /* --- Motion ----------------------------------------------------------- */
  --dur-fast:        140ms;
  --dur:             280ms;
  --dur-slow:        450ms;
  --dur-reveal:      850ms;
  --ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Focus ------------------------------------------------------------ */
  --focus-ring:      2px solid var(--gold);
  --focus-offset:    3px;

  /* --- Layers ----------------------------------------------------------- */
  --z-base:      1;
  --z-sticky:    100;
  --z-nav:       200;
  --z-drawer:    300;
  --z-overlay:   900;
  --z-modal:     1000;
  --z-toast:     1100;
}

/* Honour the OS "reduce motion" setting everywhere, once. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}