/* ═══════════════════════════════════════════════════════════
   Design Tokens — Disavow Checker v1
   Single source of truth for colors, type, spacing, motion
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ——— Surfaces ——— */
  --bg-base: #0b0f19;
  --bg-sidebar: #0e1424;
  --bg-card: #141b2d;
  --bg-card-hover: #1a2238;
  --bg-input: #0f1525;
  --bg-elevated: rgba(20, 27, 45, 0.82);
  --bg-overlay: rgba(4, 8, 18, 0.65);

  /* ——— Borders ——— */
  --border: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-bg: rgba(14, 20, 36, 0.72);

  /* ——— Text ——— */
  --text-primary: #e8ecf4;
  --text-secondary: #8b95a8;
  --text-muted: #5c6578;

  /* ——— Brand accents ——— */
  --accent-blue: #3b82f6;
  --accent-blue-hover: #2563eb;
  --accent-cyan: #06b6d4;
  --accent-gold: #d4a853;
  --accent-gold-hover: #e8bc5a;
  --accent-orange: #f59e0b;
  --accent-purple: #a855f7;

  /* ——— Semantic ——— */
  --safe: #22c55e;
  --safe-bright: #4ade80;
  --review: #f59e0b;
  --review-bright: #fbbf24;
  --disavow: #ef4444;
  --disavow-bright: #f87171;

  --color-safe-bg: rgba(34, 197, 94, 0.14);
  --color-safe-border: rgba(34, 197, 94, 0.35);
  --color-demo-bg: rgba(251, 191, 36, 0.1);
  --color-demo-border: rgba(251, 191, 36, 0.28);
  --color-pending-bg: rgba(59, 130, 246, 0.08);
  --color-pending-border: rgba(59, 130, 246, 0.25);
  --color-pending-text: #93c5fd;
  --color-error-bg: rgba(239, 68, 68, 0.1);
  --color-error-border: rgba(239, 68, 68, 0.28);
  --color-neutral-bg: rgba(15, 23, 42, 0.55);
  --color-neutral-border: rgba(148, 163, 184, 0.22);

  /* ——— Glow ——— */
  --glow-blue: rgba(59, 130, 246, 0.22);
  --glow-cyan: rgba(6, 182, 212, 0.16);
  --glow-safe: rgba(34, 197, 94, 0.2);
  --glow-review: rgba(245, 158, 11, 0.2);
  --glow-disavow: rgba(239, 68, 68, 0.25);

  /* ——— Spacing (4px scale) ——— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-page-x: var(--space-7);
  --space-page-y: var(--space-7);
  --space-page-bottom: var(--space-8);
  --space-section: var(--space-7);
  --space-card: var(--space-6);
  --space-inline: var(--space-3);

  /* ——— Typography ——— */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', var(--font);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 10px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 17px;
  --text-2xl: 1.25rem;
  --text-3xl: clamp(1.35rem, 2.5vw, 1.75rem);
  --text-display: 1.5rem;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.1em;

  /* ——— Radius ——— */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --radius: var(--radius-md);

  /* ——— Shadows ——— */
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 40px rgba(0, 0, 0, 0.42);
  --shadow-btn-primary: 0 4px 14px rgba(59, 130, 246, 0.35);
  --shadow-btn-primary-hover: 0 6px 20px rgba(59, 130, 246, 0.45);
  --shadow-focus: 0 0 0 3px rgba(59, 130, 246, 0.15);

  /* ——— Layout ——— */
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 76px;
  --header-height: 64px;

  /* ——— Motion ——— */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.35s;
  --transition-fast: var(--duration-fast) ease;
  --transition-normal: var(--duration-normal) ease;
}