/* ============================================================
   tokens.css — design system primitives
   Palette is deliberately narrow: black, white, LUXE yellow.
   Gold is an ACCENT only — never body text on black, never a wash.
   ============================================================ */

:root {

  /* ---- Surfaces ---- */
  --ink:        #0B0B0C;   /* page base */
  --surface:    #141416;   /* raised section */
  --surface-2:  #1B1B1F;   /* cards, inputs */
  --surface-3:  #232328;   /* hover on cards */
  --line:       #2A2A2F;   /* hairline borders */
  --line-soft:  #202024;

  /* ---- Brand ---- */
  --gold:       #E8B33A;
  --gold-deep:  #B98A24;
  --gold-tint:  rgba(232, 179, 58, 0.12);
  --gold-edge:  rgba(232, 179, 58, 0.32);

  /* ---- Text ---- */
  --white:      #FFFFFF;
  --text:       #ECECEE;
  --muted:      #A3A3AA;
  --muted-2:    #8A8A91;   /* WCAG AA: 5.0:1 on --surface, 5.7:1 on --bg */

  /* ---- Type ---- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-eyebrow: 0.75rem;
  --fs-body:    1rem;
  --fs-lede:    1.0625rem;

  /* Fluid display sizes */
  --fs-h1: clamp(2.25rem, 1.35rem + 4.4vw, 4.75rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2.2vw, 2.875rem);
  --fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);

  --lh-tight: 1.04;
  --tr-tight: -0.02em;
  --tr-wide:  0.16em;

  /* ---- Space ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);

  /* ---- Layout ---- */
  --wrap: 1240px;
  --wrap-pad: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --header-h: 74px;

  /* ---- Radii & elevation ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 18px 44px rgba(0,0,0,.55);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.16,.68,.32,1);
  --t-fast: 160ms var(--ease);
  --t-mid:  260ms var(--ease);
  --t-slow: 420ms var(--ease);
}

@media (max-width: 720px) {
  :root { --header-h: 64px; }
}