/* ============================================================
   DDAC — Data Driven Actualization — Tokens
   Luxury "Bar Trigona × JARVIS HUD" aesthetic.
   Deep midnight navy backgrounds, teal data accents,
   warm honey-gold metallic highlights.

   Type families ported from the marketing system to bridge brands:
     Geist     — all body + headings
     Allerta   — tiny uppercase HUD labels / eyebrows / nav
   ============================================================ */

/* ---------- Fonts (self-hosted from marketing brand vault) ---------- */
@font-face {
  font-family: 'Geist';
  src: url('/static/fonts/quiz/geist-variable.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Allerta';
  src: url('/static/fonts/quiz/allerta-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand colors ---------- */

  /* Midnight ambient backgrounds (page) */
  --bg-deep:        #1a1a2e; /* primary page bg */
  --bg-deep-2:      #1d1d30;
  --bg-deep-3:      #1a1a28;
  --bg-deep-4:      #161628; /* footer */
  --bg-gradient:    linear-gradient(165deg, #1a1a2e 0%, #1d1d30 50%, #1a1a28 100%);
  --bg-base:        #1a1a2e;   /* the solid tone under the gradient: Safari 26 reads body background-color (never a gradient) to tint its own bars */

  /* Teal surface (cards / containers) — Bar Trigona deep teal */
  --surface-1:      rgba(30, 58, 58, 0.85);
  --surface-2:      rgba(42, 74, 74, 0.80);
  --surface-3:      rgba(58, 88, 88, 0.85);
  --surface-grad:   linear-gradient(145deg, rgba(30,58,58,.85) 0%, rgba(42,74,74,.80) 100%);
  --surface-grad-warm: linear-gradient(135deg, rgba(30,58,58,.9) 0%, rgba(42,74,74,.85) 50%, rgba(35,65,65,.9) 100%);

  /* Teal — primary "data / HUD" accent (JARVIS green-teal) */
  --teal-50:        #e8f7f1;
  --teal-300:       #7fddc0;
  --teal-500:       #4ecca3; /* THE brand teal — used everywhere */
  --teal-600:       #3eb389;
  --teal-700:       #2e8a6a;
  --teal-glow:      rgba(78, 204, 163, 0.5);
  --teal-soft:      rgba(78, 204, 163, 0.12);
  --teal-border:    rgba(78, 204, 163, 0.2);

  /* Honey-gold — warm metallic luxury accent (Four Seasons) */
  --gold-300:       #e8c87a;
  --gold-400:       #d4b896; /* champagne — used for links & text accents */
  --gold-500:       #d4a855; /* the bar */
  --gold-600:       #c9985a;
  --gold-700:       #a67c3d;
  --gold-grad:      linear-gradient(180deg, #d4a855 0%, #c9985a 50%, #a67c3d 100%); /* @kind color */
  --gold-glow:      rgba(201, 162, 39, 0.4);
  --gold-soft:      rgba(201, 162, 39, 0.15);
  --gold-border:    rgba(201, 162, 39, 0.25);

  /* Text — pale cool grey on dark */
  --fg-1:           #f0f4f4; /* highest contrast — titles */
  --fg-2:           #e8e8e8; /* body */
  --fg-3:           rgba(168, 192, 192, 0.85); /* secondary body */
  --fg-4:           rgba(168, 178, 192, 0.80); /* nav, meta */
  --fg-5:           rgba(106, 138, 138, 0.80); /* tertiary / readouts */
  --fg-muted:       rgba(136, 146, 176, 0.70); /* footer text */

  /* Semantic */
  --danger:         #e74c3c;
  --warning:        var(--gold-400);
  --info:           var(--teal-500);
  --discord:        #5865F2;
  --discord-hover:  #4752c4;

  /* Borders */
  --border-1:       rgba(78, 204, 163, 0.15); /* default container */
  --border-2:       rgba(78, 204, 163, 0.20); /* slightly stronger */
  --border-3:       rgba(78, 204, 163, 0.35); /* featured */
  --border-warm-1:  rgba(201, 162, 39, 0.10);
  --border-warm-2:  rgba(201, 162, 39, 0.25);
  --border-warm-3:  rgba(201, 162, 39, 0.40);
  --border-neutral: rgba(74, 104, 104, 0.60);

  /* ---------- Type ----------
     Two families, two jobs:
       --font-sans     → Geist. Body, headings, metrics. Default for everything.
       --font-signage  → Allerta. Tiny uppercase labels with wide tracking only.
  */
  --font-sans:      'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-signage:   'Allerta', 'Geist', -apple-system, sans-serif;
  --font-mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Sizes — utility scale */
  --fs-9:           9px;
  --fs-10:          10px;
  --fs-11:          11px;
  --fs-12:          12px;
  --fs-13:          13px;
  --fs-14:          14px;
  --fs-16:          16px;
  --fs-22:          22px;
  --fs-26:          26px;
  --fs-28:          28px;
  --fs-36:          36px;

  /* Weight */
  --fw-light:       300; /* @kind font */
  --fw-regular:     400; /* @kind font */
  --fw-medium:      500; /* @kind font */
  --fw-semibold:    600; /* @kind font */
  --fw-bold:        700; /* @kind font */

  /* Tracking — uppercase HUD labels rely on wide letter-spacing */
  --tr-tight:      -0.5px;
  --tr-normal:      0.3px;
  --tr-wide:        1px;
  --tr-wider:       1.5px;   /* nav / labels */
  --tr-widest:      2px;     /* section titles */

  /* ---------- Spacing ---------- */
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:           12px;
  --sp-4:           16px;
  --sp-5:           20px;
  --sp-6:           24px;
  --sp-7:           28px;
  --sp-8:           32px;
  --sp-9:           36px;
  --sp-10:          40px;
  --sp-12:          48px;

  /* ---------- Radii ---------- */
  --r-2:            2px; /* badges (rotated diamond) */
  --r-3:            3px; /* small badges */
  --r-4:            4px; /* small buttons / labels */
  --r-6:            6px; /* cards, primary buttons */
  --r-8:            8px; /* large card / login */
  --r-full:         9999px;

  /* ---------- Shadows ---------- */
  --shadow-card:    0 2px 16px rgba(0, 0, 0, 0.20);
  --shadow-card-lg: 0 4px 24px rgba(0, 0, 0, 0.25);
  --shadow-elev:    0 4px 24px rgba(0, 0, 0, 0.30);
  --shadow-hover:   0 12px 40px rgba(0, 0, 0, 0.30);
  --shadow-modal:   0 8px 32px rgba(0, 0, 0, 0.40);
  --shadow-discord: 0 4px 16px rgba(88, 101, 242, 0.30);
  --inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.03);

  /* Glow shadows — light beams on accent elements */
  --glow-teal:      0 0 12px rgba(78, 204, 163, 0.50);
  --glow-teal-sm:   0 0 8px  rgba(78, 204, 163, 0.60);
  --glow-gold:      0 0 20px rgba(201, 162, 39, 0.40);
  --glow-gold-sm:   0 0 8px  rgba(201, 162, 39, 0.40);

  /* ---------- Motion ---------- */
  --ease-std:       cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:       0.3s; /* @kind other */
  --dur-std:        0.4s; /* @kind other */
  --dur-slow:       4s; /* @kind other */ /* arc-glow */
  --ease-hud:       ease; /* @kind other */
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html { background-color: var(--bg-base); }
body {
  font-family: var(--font-sans);
  background: var(--bg-gradient);
  background-color: var(--bg-base);   /* after the shorthand, which resets it to transparent */
  color: var(--fg-2);
  font-size: var(--fs-14);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* H1 — Welcome titles ("Welcome back, Marcus") */
h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-28);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  letter-spacing: 0.5px;
  line-height: 1.2;
}

/* H2 — Card titles ("Welcome Back" login) */
h2, .h2 {
  font-size: var(--fs-26);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  letter-spacing: 0.5px;
}

/* H3 — Action card titles */
h3, .h3 {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  letter-spacing: 0.3px;
}

/* Section title — UPPERCASE HUD label with diamond */
.eyebrow,
.section-title {
  font-family: var(--font-signage);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: var(--tr-widest);
}

/* Stat / metric value — large numerics */
.metric {
  font-size: var(--fs-36);
  font-weight: var(--fw-semibold);
  color: var(--gold-400);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-tight);
  text-shadow: 0 0 20px rgba(212, 184, 150, 0.20);
}

/* HUD label — tiny, wide-tracked uppercase ("STATUS", "OPTIMIZER") */
.hud-label {
  font-family: var(--font-signage);
  font-size: var(--fs-10);
  font-weight: var(--fw-regular);
  color: var(--teal-500);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
}

/* Body */
p, .body {
  font-size: var(--fs-13);
  color: var(--fg-3);
  line-height: 1.6;
}

.body-lg {
  font-size: var(--fs-14);
  color: var(--fg-3);
  line-height: 1.7;
}

/* Caption / readout */
.caption {
  font-family: var(--font-signage);
  font-size: var(--fs-9);
  color: rgba(78, 204, 163, 0.60);
  text-transform: uppercase;
  letter-spacing: var(--tr-wide);
}

/* Links — champagne gold by default, teal on hover */
a {
  color: var(--gold-400);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-std);
}
a:hover { color: var(--teal-500); }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
}

/* ============================================================
   Global keyframes — the three ambient loops.
   Available wherever this stylesheet is loaded.
   ============================================================ */
@keyframes gentle-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.95); }
}
@keyframes arc-glow {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.8; }
}
@keyframes ddac-soft-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(78, 204, 163, 0.3); }
  50% { box-shadow: 0 0 12px 2px rgba(78, 204, 163, 0.15); }
}