/* ===========================================================================
   DESIGN TOKENS — single source of truth for the visual system.
   ---------------------------------------------------------------------------
   Measured contrast (WCAG 2.1 relative luminance, verified 2026-07-19):
     ink    on bg / surface / surface-2 : 17.6 / 16.1 / 14.2   (AAA)
     muted  on bg / surface / surface-2 : 10.3 /  9.5 /  8.4   (AAA)
     faint  on bg / surface             :  6.5 /  5.9           (AA — small labels only)
     accent on bg / surface             :  9.2 /  8.5           (AAA, for accent TEXT)
     on-accent text on accent fill      :  9.2                  (AAA — button labels)
   NEVER put white text on the accent fill. Dark ink on amber only.
   =========================================================================== */

:root {
  /* Surfaces — deep slate, confident and premium. */
  --bg:        #0C1017;   /* page background */
  --surface:   #141A23;   /* cards, header, elevated panels */
  --surface-2: #1D2530;   /* hover states, nested elevation */

  /* Ink */
  --ink:   #F2F6FA;       /* headings, body */
  --muted: #B4C0CD;       /* secondary copy */
  --faint: #8B98A6;       /* tertiary labels, captions (AA only, keep small/sparse) */

  /* THE accent — warm amber. One line to rebrand. Dark ink sits on the fill. */
  --accent:        #E7A94A;
  --accent-bright: #F4C877;   /* hover / focus brighten */
  --on-accent:     #0C1017;   /* text color ON an amber fill */

  /* Lines and fills (non-text, contrast-exempt) */
  --line:      #263041;
  --line-soft: #1A222E;
  --accent-dim: rgba(231, 169, 74, 0.12);
  --accent-glow: rgba(231, 169, 74, 0.22);

  /* Type — self-hosted variable fonts, zero third-party requests. */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Fluid type scale (~1.25, clamped). Body floor is generous for older eyes. */
  --step--1: clamp(0.86rem, 0.83rem + 0.13vw, 0.94rem);
  --step-0:  clamp(1.05rem, 1.00rem + 0.22vw, 1.20rem);  /* body ~17-19px */
  --step-1:  clamp(1.22rem, 1.12rem + 0.45vw, 1.45rem);
  --step-2:  clamp(1.50rem, 1.30rem + 0.90vw, 2.05rem);
  --step-3:  clamp(1.95rem, 1.55rem + 1.80vw, 2.95rem);
  --step-4:  clamp(2.45rem, 1.85rem + 2.80vw, 4.10rem);
  --step-5:  clamp(2.90rem, 2.00rem + 4.30vw, 5.40rem);

  /* Layout */
  --gutter: clamp(1.15rem, 0.6rem + 2.6vw, 3rem);
  --maxw: 1180px;
  --radius: 10px;
  --radius-lg: 18px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Respect users who ask the OS to reduce motion. Kills all animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/fonts/archivo-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}