/* ============================================================
   THE 100 NETWORK — Design Tokens
   High-roller luxe. Near-black base, warm metal, one neon accent.

   DISCIPLINE RULE (D26): gold + cyan together never exceed ~3% of
   any viewport. Neon may glow, outline or trace — it must never
   fill a shape larger than a button.
   ============================================================ */

:root {
  /* ---- Base surfaces (inherited verbatim from the prior build, D28) ---- */
  --bg:            #0a0a0f;
  --surface:       #10101a;
  --surface-2:     #16162a;
  --border:        #1e1e36;
  --border-lit:    #2a2a48;

  /* ---- Text ---- */
  --text-primary:  #e2e8f0;
  --text-secondary:#94a3b8;
  --text-muted:    #475569;

  /* ---- Gold ramp (D28) ----
     Flat gold reads as mustard/warning. A ramp reads as metal. */
  --gold-50:  #fdf6e3;
  --gold-100: #f9e9c0;
  --gold-200: #f4dd9a;
  --gold-300: #eccd74;
  --gold-400: #f59e0b;   /* legacy --gold, kept verbatim */
  --gold-500: #d9b44a;
  --gold-600: #d97706;   /* legacy CTA gradient end */
  --gold-700: #a8720c;

  /* ---- Warm neutrals ---- */
  --ivory:      #f3eee8;
  --bone:       #f2f2da;
  --brass:      #82754a;
  --champagne:  #d9c58e;

  /* ---- The single neon accent (D42) ----
     Cyan. 11:1 on --bg. Fontainebleau's actual accent.
     Used ONLY for: tap ripple, focus rings, live indicators. */
  --neon:       #40d9f1;
  --neon-soft:  #7febfd;
  --neon-dim:   rgba(64, 217, 241, 0.18);

  /* ---- Semantic ---- */
  --danger:     #ef4444;
  --warn:       #f59e0b;
  --ok:         #10b981;

  /* ---- Metal gradients ---- */
  --grad-gold:  linear-gradient(135deg, var(--gold-400), var(--gold-600));
  --grad-foil:  linear-gradient(105deg,
                  var(--gold-700) 0%,
                  var(--gold-300) 38%,
                  var(--gold-50)  46%,
                  var(--gold-200) 54%,
                  var(--gold-600) 100%);
  --grad-hair:  linear-gradient(90deg,
                  transparent,
                  var(--gold-300) 20%,
                  var(--gold-200) 50%,
                  var(--gold-300) 80%,
                  transparent);

  /* ---- Type ---- */
  --font-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Scale ---- */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(0.94rem, 0.90rem + 0.20vw, 1.02rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.40vw, 1.42rem);
  --step-2:  clamp(1.55rem, 1.35rem + 1.00vw, 2.20rem);
  --step-3:  clamp(2.10rem, 1.70rem + 2.00vw, 3.60rem);
  --step-4:  clamp(2.80rem, 2.00rem + 4.00vw, 5.60rem);

  /* ---- Space ---- */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3.25rem;
  --sp-6: 5.25rem;

  /* ---- Geometry ----
     CR80 / ISO 7810 ID-1 — the real card. 85.6 x 53.98 mm.
     Corner radius 3.18mm = 3.72% of width. */
  --card-ratio:  85.6 / 53.98;
  --card-radius: 3.72%;

  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 18px;

  /* ---- Motion ----
     Long dwell, fast release. That's what reads as expensive. */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  180ms;
  --dur:       420ms;
  --dur-slow:  900ms;

  /* ---- Elevation: 5-layer stack so the card reads as an object (D30) ---- */
  --shadow-card:
    0 1px 1px rgba(0,0,0,0.30),
    0 4px 6px rgba(0,0,0,0.28),
    0 12px 18px rgba(0,0,0,0.26),
    0 28px 44px rgba(0,0,0,0.30),
    0 56px 90px rgba(0,0,0,0.34);
  --shadow-ui: 0 2px 8px rgba(0,0,0,0.4);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}