/* ==========================================================================
   DashDashBoom Design System — Colors & Type
   Voice-powered car scavenger hunt — game-show broadcast energy.
   ========================================================================== */

/* ---------- Self-hosted fonts ---------- */

:root {
  /* ── BRAND COLORS ─────────────────────────────────────────────────── */
  /* Electric Yellow — primary. "Turbo-Tokens," CTAs, highlights, logo bg */
  --ddb-yellow:        #FFD000;
  --ddb-yellow-dim:    rgba(255, 208, 0, 0.15);
  --ddb-yellow-glow:   rgba(255, 208, 0, 0.08);

  /* Cyan — accent #1. Speed multipliers, GPS, info, gradients */
  --ddb-cyan:          #00D4FF;
  --ddb-cyan-dim:      rgba(0, 212, 255, 0.15);

  /* Laser Pink — accent #2. Roast Master, team mode, hard difficulty */
  --ddb-pink:          #FF3B9A;
  --ddb-pink-dim:      rgba(255, 59, 154, 0.15);

  /* Green — success. "LIVE", easy difficulty, streaks, voice idle ok */
  --ddb-green:         #00E676;
  --ddb-green-dim:     rgba(0, 230, 118, 0.15);

  /* Red — destructive / urgency. Final seconds, mic listening, end-game */
  --ddb-red:           #FF453A;
  --ddb-red-dim:       rgba(255, 69, 58, 0.15);

  /* Orange — streak fire. Used with Flame icon, streak multipliers */
  --ddb-orange:        #FF9F0A;
  --ddb-orange-dim:    rgba(255, 159, 10, 0.15);

  /* ── NEUTRALS — DARK ONLY ────────────────────────────────────────── */
  --ddb-bg:            #050505;   /* App + marketing root background  */
  --ddb-bg-elevated:   #0a0a0a;   /* Slightly raised surfaces          */
  --ddb-surface:       #151515;   /* Cards (in-app)                    */
  --ddb-surface-soft:  rgba(255, 255, 255, 0.04);  /* Cards (marketing) */
  --ddb-surface-hover: rgba(255, 255, 255, 0.08);

  --ddb-border:        rgba(255, 255, 255, 0.10);
  --ddb-border-hover:  rgba(255, 255, 255, 0.18);
  --ddb-border-strong: rgba(255, 255, 255, 0.20);

  /* ── FOREGROUND ──────────────────────────────────────────────────── */
  --ddb-fg1:           #f5f5f5;   /* Primary text, headings           */
  --ddb-fg2:           rgba(255, 255, 255, 0.70); /* Secondary text   */
  --ddb-fg-muted:      rgba(255, 255, 255, 0.55); /* Marketing muted  */
  --ddb-fg-dim:        rgba(255, 255, 255, 0.35); /* Tertiary, hints  */
  --ddb-fg-on-yellow:  #050505;   /* Black-on-yellow for buttons       */

  /* ── DIFFICULTY (target cards) ───────────────────────────────────── */
  --ddb-diff-easy-bg:   rgba(0, 230, 118, 0.12);
  --ddb-diff-easy-fg:   var(--ddb-green);
  --ddb-diff-med-bg:    rgba(255, 208, 0, 0.12);
  --ddb-diff-med-fg:    var(--ddb-yellow);
  --ddb-diff-hard-bg:   rgba(255, 59, 154, 0.12);
  --ddb-diff-hard-fg:   var(--ddb-pink);

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────── */
  --ddb-font-display:  'Outfit', system-ui, sans-serif;
  --ddb-font-body:     'Inter', system-ui, sans-serif;
  --ddb-font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── SPACING / RADII / SHADOWS ───────────────────────────────────── */
  --ddb-radius-sm:     12px;
  --ddb-radius-md:     20px;
  --ddb-radius-lg:     28px;
  --ddb-radius-pill:   100px;

  --ddb-shadow-card:   0 8px 40px -12px rgba(0, 0, 0, 0.40);
  --ddb-shadow-hero:   0 30px 80px -20px rgba(0, 0, 0, 0.70);
  --ddb-glow-yellow:   0 0 120px -40px rgba(255, 208, 0, 0.30);
  --ddb-glow-yellow-soft: 0 0 0 1px rgba(255, 208, 0, 0.30), 0 8px 32px -8px rgba(255, 208, 0, 0.25);

  /* ── EASING ──────────────────────────────────────────────────────── */
  --ddb-ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ddb-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ddb-transition:    0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================================
   SEMANTIC TYPE STYLES
   Use these on bare elements, or via class on any element.
   Display = Outfit, generally UPPERCASE, tight tracking, bold-extrabold.
   Body    = Inter, normal-case, 1.6 line-height.
   ========================================================================= */

.ddb-h1, h1.ddb {
  font-family: var(--ddb-font-display);
  font-weight: 900;
  font-size: clamp(2.75rem, 5.8vw, 4.35rem);   /* 44 → 70px */
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--ddb-fg1);
}

.ddb-h2, h2.ddb {
  font-family: var(--ddb-font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);            /* 32 → 48px */
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ddb-fg1);
}

.ddb-h3, h3.ddb {
  font-family: var(--ddb-font-display);
  font-weight: 800;
  font-size: 1.15rem;                            /* 18.4px */
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ddb-fg1);
}

.ddb-h4, h4.ddb {
  font-family: var(--ddb-font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.005em;
  color: var(--ddb-fg1);
}

/* Section eyebrow / kicker — small uppercase yellow tag above headings */
.ddb-eyebrow {
  font-family: var(--ddb-font-display);
  font-weight: 700;
  font-size: 0.75rem;                            /* 12px */
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ddb-yellow);
}

/* Sub-eyebrow used inside cards (smaller, dim) */
.ddb-kicker {
  font-family: var(--ddb-font-display);
  font-weight: 700;
  font-size: 0.625rem;                           /* 10px */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ddb-fg-dim);
}

/* Body paragraph */
.ddb-p, p.ddb {
  font-family: var(--ddb-font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ddb-fg-muted);
}

.ddb-lede {
  font-family: var(--ddb-font-body);
  font-weight: 400;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.65;
  color: var(--ddb-fg-muted);
}

/* Inline strong — pulls text up to full white inside a muted paragraph */
.ddb-p strong, p.ddb strong { color: var(--ddb-fg1); font-weight: 600; }

/* Score / number — big chunky display digits (Turbo-Tokens, timer) */
.ddb-num {
  font-family: var(--ddb-font-display);
  font-weight: 800;
  font-feature-settings: "tnum";
  letter-spacing: 0.02em;
}

/* Mono — used for game-time countdown (e.g. 9:42) */
.ddb-mono {
  font-family: var(--ddb-font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Code — rarely used but defined for completeness */
code.ddb, .ddb-code {
  font-family: var(--ddb-font-mono);
  font-size: 0.875em;
  padding: 2px 6px;
  background: var(--ddb-surface-soft);
  border: 1px solid var(--ddb-border);
  border-radius: 6px;
  color: var(--ddb-yellow);
}

/* Optional global resets when using this file standalone */
.ddb-page {
  background: var(--ddb-bg);
  color: var(--ddb-fg1);
  font-family: var(--ddb-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}