/**
 * AIAppDrop — Design System Tokens (2026)
 * Dark-first · Linear/Vercel craft · controlled indigo/cyan accent
 *
 * Fonts load via monetization.js (preconnect) — not CSS @import.
 */

:root {
  /* ── Brand ─────────────────────────────────────────── */
  --brand-primary: #6366f1;
  --brand-primary-hover: #818cf8;
  --brand-primary-pressed: #4f46e5;
  --brand-accent: #22d3ee;
  --brand-accent-hover: #67e8f9;

  /* ── Semantic ──────────────────────────────────────── */
  --brand-success: #34d399;
  --brand-success-fg: #6ee7b7;
  --brand-warning: #fbbf24;
  --brand-warning-fg: #fcd34d;
  --brand-danger: #f87171;
  --brand-danger-fg: #fca5a5;

  /* ── Dark surfaces (default) ───────────────────────── */
  --bg-base: #09090b;
  --bg-surface: #0f0f12;
  --bg-elevated: #16161b;
  --bg-overlay-panel: #1a1a21;
  --bg-border: #27272f;
  --bg-border-strong: #3f3f4a;
  --bg-hover: #1c1c24;

  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-invert: #09090b;

  /* ── Light source values ───────────────────────────── */
  --bg-base-light: #fafafa;
  --bg-surface-light: #ffffff;
  --bg-elevated-light: #f4f4f5;
  --bg-overlay-panel-light: #ffffff;
  --bg-border-light: #e4e4e7;
  --bg-border-strong-light: #d4d4d8;
  --bg-hover-light: #f4f4f5;
  --text-primary-light: #09090b;
  --text-secondary-light: #52525b;
  --text-muted-light: #71717a;

  /* ── Washes (accent fills) ─────────────────────────── */
  --wash-primary: rgba(99, 102, 241, 0.12);
  --wash-accent: rgba(34, 211, 238, 0.1);
  --wash-success: rgba(52, 211, 153, 0.12);
  --wash-warning: rgba(251, 191, 36, 0.12);
  --wash-danger: rgba(248, 113, 113, 0.12);

  /* ── Spacing (4/8 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;

  /* Legacy aliases (keep existing CSS working) */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-10);
  --space-2xl: var(--space-16);
  --space-3xl: var(--space-20);

  /* ── Radius ────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* ── Elevation: border-first in dark ───────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-card: none;
  --shadow-card-hover: none;
  --ring-card: inset 0 0 0 1px var(--bg-border);
  --ring-card-hover: inset 0 0 0 1px rgba(99, 102, 241, 0.45);
  --shadow-glow: 0 0 0 1px rgba(99, 102, 241, 0.35), 0 0 24px rgba(99, 102, 241, 0.14);
  --shadow-glow-accent: 0 0 0 1px rgba(34, 211, 238, 0.28), 0 0 20px rgba(34, 211, 238, 0.12);

  /* ── Motion ────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 200ms var(--ease-out);
  --transition-slow: 250ms var(--ease-out);
  --transition-theme: background-color 200ms ease, color 200ms ease, border-color 200ms ease,
    box-shadow 200ms ease, fill 200ms ease;

  /* ── Typography ────────────────────────────────────── */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Syne", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.025em;
  --tracking-normal: -0.011em;
  --tracking-wide: 0.04em;

  --text-display: clamp(2.25rem, 5vw, 3.25rem);
  --text-h1: clamp(1.75rem, 3.5vw, 2.25rem);
  --text-h2: clamp(1.25rem, 2.2vw, 1.5rem);
  --text-h3: 1.125rem;
  --text-h4: 0.9375rem;
  --text-body: 0.9375rem;
  --text-small: 0.8125rem;
  --text-xs: 0.75rem;
  --text-2xs: 0.6875rem;

  /* ── Layout ────────────────────────────────────────── */
  --header-height: 56px;
  --container-max: 1200px;
  --container-pad: clamp(16px, 3.5vw, 28px);
  --prose-max: 68ch;

  /* ── Glass / overlay ───────────────────────────────── */
  --glass-bg: rgba(9, 9, 11, 0.78);
  --glass-bg-strong: rgba(15, 15, 18, 0.92);
  --glass-border: rgba(255, 255, 255, 0.06);
  --overlay: rgba(0, 0, 0, 0.68);

  /* ── Focus ─────────────────────────────────────────── */
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--brand-primary);

  /* ── Z-index scale ─────────────────────────────────── */
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 800;
  --z-toast: 900;
  --z-sheet: 860;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg-base: var(--bg-base-light);
  --bg-surface: var(--bg-surface-light);
  --bg-elevated: var(--bg-elevated-light);
  --bg-overlay-panel: var(--bg-overlay-panel-light);
  --bg-border: var(--bg-border-light);
  --bg-border-strong: var(--bg-border-strong-light);
  --bg-hover: var(--bg-hover-light);

  --text-primary: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --text-muted: var(--text-muted-light);
  --text-invert: #fafafa;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);
  --ring-card: inset 0 0 0 1px var(--bg-border);
  --ring-card-hover: inset 0 0 0 1px rgba(99, 102, 241, 0.4);
  --shadow-glow: 0 0 0 1px rgba(99, 102, 241, 0.22), 0 0 20px rgba(99, 102, 241, 0.08);
  --shadow-glow-accent: 0 0 0 1px rgba(8, 145, 178, 0.22), 0 0 16px rgba(34, 211, 238, 0.08);

  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-bg-strong: rgba(255, 255, 255, 0.94);
  --glass-border: rgba(0, 0, 0, 0.06);
  --overlay: rgba(9, 9, 11, 0.45);

  --wash-primary: rgba(99, 102, 241, 0.08);
  --wash-accent: rgba(8, 145, 178, 0.08);
  --wash-success: rgba(16, 185, 129, 0.1);
  --wash-warning: rgba(245, 158, 11, 0.1);
  --wash-danger: rgba(239, 68, 68, 0.1);

  color-scheme: light;
}

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