/*
 * tokens.css — TrackBounty design system tokens (redesign A1)
 *
 * Spec: .claude/reports/arch/redesign_a1_spec_2026-04-30T2144Z.md §1
 *
 * Additive policy: these tokens sit ALONGSIDE base.html's existing :root
 * block. Old tokens (--bg, --bg-card, --accent, --text, ...) stay until each
 * surface migrates to new tokens in its own A2/A3 ship. Final base.html
 * :root cleanup lands after the last surface migrates (mirroring the
 * match_score NULL→DROP cadence in FOLLOWUP-047).
 *
 * Brand sacred: --accent (#6366f1 indigo) + Inter Variable. Visual
 * language is otherwise open. taste-skill Inter ban explicitly overridden
 * (see .claude/skills/taste/TRACKBOUNTY_OVERRIDES.md).
 */

/* === Self-hosted fonts (replaces Google Fonts CDN — base.html cleanup in Phase 4) === */

@font-face {
  font-family: 'Inter Variable';
  src: url('/static/fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('/static/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono Variable';
  src: url('/static/fonts/JetBrainsMono-Variable.woff2') format('woff2-variations'),
       url('/static/fonts/JetBrainsMono-Variable.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === Surface ramp (4 stops, dark theme) === */
  --surface-0: #07070b;             /* page bg, deepest */
  --surface-1: #0f0f17;             /* card bg default */
  --surface-2: #15151f;             /* elevated card / hover */
  --surface-3: #1d1d2a;             /* popover / sheet */
  --surface-4: #272735;             /* tooltip / topmost */

  /* === Border ramp === */
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-focus: var(--accent-bright);

  /* === Text === */
  --text-primary: #ecedf2;
  --text-secondary: #9b9eaf;
  --text-muted: #62657a;
  --text-disabled: #3a3c4a;
  --text-inverse: #07070b;

  /* === Accent (#6366f1 indigo — brand sacred) === */
  --accent: #6366f1;
  --accent-bright: #818cf8;
  --accent-dim: rgba(99, 102, 241, 0.15);
  --accent-glow: rgba(99, 102, 241, 0.25);

  /* === Tier palette (v1.1 — differentiated hue families) ===
   * S+  prestige iridescent  (gold → orange → rose, heaviest glow)
   * S   premium amber        (pure warm amber — clearly less prestige than S+)
   * A   violet                (cool premium)
   * B   blue                  (cool standard)
   * C   slate                 (cool neutral)
   * D   ghost outline         (intentional bottom rung — surface tint + dashed
   *                            border + dim text. NOT a missing-data placeholder.)
   *
   * Contrast (WCAG AA bold/UI minimum 3:1):
   * S+ text #190600 on avg-gradient #ff7a30 ≈ 11.8:1   ✓ AAA
   * S  text #1a0f00 on avg-gradient #f6b022 ≈ 10.7:1   ✓ AAA
   * A  text #ffffff on avg-gradient #b56cf9 ≈  4.3:1   ✓ AA-bold
   * B  text #ffffff on avg-gradient #4d97f8 ≈  4.5:1   ✓ AA
   * C  text #ffffff on avg-gradient #7c8aa1 ≈  4.6:1   ✓ AA
   * D  text #aab0c0 on --surface-1 #0f0f17  ≈  6.8:1   ✓ AA
   */
  --tier-splus-bg: linear-gradient(135deg, #ffd700 0%, #ff6b00 50%, #e11d48 100%);
  --tier-splus-text: #190600;
  --tier-splus-glow: 0 0 14px rgba(251, 191, 36, 0.55), 0 0 24px rgba(255, 107, 0, 0.20);

  --tier-s-bg: linear-gradient(135deg, #f59e0b, #fbbf24);
  --tier-s-text: #1a0f00;
  --tier-s-glow: 0 0 8px rgba(251, 191, 36, 0.30);

  --tier-a-bg: linear-gradient(135deg, #a855f7, #c084fc);
  --tier-a-text: #ffffff;
  --tier-a-glow: 0 0 8px rgba(168, 85, 247, 0.30);

  --tier-b-bg: linear-gradient(135deg, #3b82f6, #60a5fa);
  --tier-b-text: #ffffff;
  --tier-b-glow: 0 0 6px rgba(59, 130, 246, 0.25);

  --tier-c-bg: linear-gradient(135deg, #64748b, #94a3b8);
  --tier-c-text: #ffffff;
  --tier-c-glow: 0 0 4px rgba(100, 116, 139, 0.20);

  /* D = intentional ghost. Surface tint + dashed border, NOT transparent → invisible. */
  --tier-d-bg: rgba(148, 163, 184, 0.04);
  --tier-d-border: rgba(148, 163, 184, 0.30);
  --tier-d-text: #aab0c0;
  --tier-d-glow: none;

  /* === State === */
  --state-success: #10b981;
  --state-success-bg: rgba(16, 185, 129, 0.12);
  --state-warning: #f59e0b;
  --state-warning-bg: rgba(245, 158, 11, 0.12);
  --state-error:   #ef4444;
  --state-error-bg:   rgba(239, 68, 68, 0.12);
  --state-info:    var(--accent);
  --state-info-bg: var(--accent-dim);

  /* === Spacing (4px base scale) === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* === Radii === */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* === Shadows (4 stops, subtle → elevated) === */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.20);
  --shadow-4: 0 24px 64px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.30);

  /* === Type scale + family tokens === */
  --font-sans: 'Inter Variable', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'SF Mono', Menlo, monospace;

  --text-xs:   12px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;
  --text-5xl:  48px;

  --leading-tight:   1.15;
  --leading-snug:    1.30;
  --leading-normal:  1.50;
  --leading-relaxed: 1.65;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* === Motion === */
  --motion-fast:  150ms;
  --motion-base:  250ms;
  --motion-slow:  400ms;
  --ease-out-expo: cubic-bezier(0.32, 0.72, 0, 1);
  --scroll-debounce: 500ms;

  /* === Density (default desktop = 3 cards-per-row) === */
  --density: 3;
  --density-card-padding: var(--space-5);
  --density-card-gap:     var(--space-4);
  --density-card-min-w:   280px;

  /* === Z-index === */
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   50;
  --z-popover:  100;
  --z-overlay:  500;
  --z-sheet:    900;
  --z-modal:    1000;
  --z-toast:    9999;

  /* === Glass === */
  --glass-bg: rgba(15, 15, 23, 0.62);
  --glass-blur: blur(16px) saturate(140%);
}

/* === Density override blocks === */

[data-density="2"] {
  --density: 2;
  --density-card-padding: var(--space-6);
  --density-card-gap:     var(--space-5);
  --density-card-min-w:   360px;
}

[data-density="4"] {
  --density: 4;
  --density-card-padding: var(--space-3);
  --density-card-gap:     var(--space-3);
  --density-card-min-w:   220px;
}

/* === Reduced-motion override === */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}

/* === Mobile motion budget (30% reduced per DNA #6) === */

@media (max-width: 768px) {
  :root {
    --motion-fast: 105ms;
    --motion-base: 175ms;
    --motion-slow: 280ms;
  }
}

/* === Mobile density auto-collapse (mobile-first per DNA #8) ===
 * Below 768px, density toggle is hidden and grid auto-collapses to fit
 * viewport width regardless of stored density preference.
 */

@media (max-width: 480px) {
  :root {
    --density: 1;
    --density-card-min-w: 100%;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --density: 2;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --density: 3;
  }
}