/*
 * tokens.css — AUTO-GENERATED. Do not edit by hand.
 * Source:    frontend/design/tokens.json (DTCG W3C format)
 * Generator: scripts/build-tokens.mjs
 * Regenerate: node scripts/build-tokens.mjs
 *
 * This file MUST be loaded BEFORE styles.css / seo-pages.css —
 * legacy custom properties are aliased at the bottom of this file.
 */

:root {
  --color-bg-base: #000000;  /* Page background — pure black */
  --color-bg-card: #0b1220;  /* Card surface on dark bg */
  --color-bg-card-hover: #131c30;
  --color-bg-elev: #111a2c;  /* Elevated surface (modals, sticky) */
  --color-text-base: #ffffff;  /* Primary text on dark */
  --color-text-soft: #e5e7eb;  /* Soft white (body copy) */
  --color-text-dim: #94a3b8;  /* Dimmed text (descriptions) */
  --color-text-muted: #64748b;  /* Muted text (meta, captions) */
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;  /* Brand primary — AVP AI signature blue */
  --color-brand-600: #2563eb;  /* Hover state for brand-500 */
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;
  --color-brand-alpha-soft: rgba(59, 130, 246, 0.12);  /* Subtle brand tint */
  --color-brand-alpha-soft-2: rgba(59, 130, 246, 0.22);
  --color-brand-alpha-border: rgba(59, 130, 246, 0.25);  /* Brand-tinted border */
  --color-brand-alpha-grid: rgba(59, 130, 246, 0.05);  /* Grid overlay (faint) */
  --color-brand-alpha-grid-strong: rgba(59, 130, 246, 0.09);
  --color-border-subtle: #1e293b;  /* Default border on dark */
  --color-border-strong: #334155;
  --color-state-ok: #34d399;
  --color-state-warn: #f59e0b;
  --color-state-danger: #ef4444;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --radius-sm: 3px;
  --radius-md: 4px;  /* Default radius (seo-pages baseline) */
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-2xl: 12px;
  --radius-pill: 9999px;
  --type-family-sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --type-family-mono: 'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --type-size-xs: 0.75rem;
  --type-size-sm: 0.875rem;
  --type-size-base: 1rem;
  --type-size-lg: 1.125rem;
  --type-size-xl: 1.25rem;
  --type-size-2xl: 1.5rem;
  --type-size-3xl: 1.875rem;
  --type-size-h3: clamp(1.25rem, 2vw, 1.5rem);
  --type-size-h2: clamp(1.6rem, 3vw, 2.25rem);
  --type-size-h1: clamp(2.2rem, 4.2vw, 3.4rem);  /* Hero H1 — fluid */
  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-semibold: 600;
  --type-weight-bold: 700;
  --type-leading-tight: 1.15;
  --type-leading-snug: 1.3;
  --type-leading-normal: 1.6;
  --type-tracking-tight: -0.03em;  /* Hero H1 tightening */
  --type-tracking-snug: -0.02em;
  --type-tracking-normal: 0;
  --type-tracking-wide: 0.05em;  /* Eyebrows, mono labels */
  --type-tracking-widest: 0.08em;
  --motion-duration-fast: 150ms;
  --motion-duration-base: 240ms;
  --motion-duration-slow: 420ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);  /* Material 3 standard */
  --motion-easing-decel: cubic-bezier(0, 0, 0.2, 1);  /* Enter from outside */
  --motion-easing-accel: cubic-bezier(0.4, 0, 1, 1);  /* Leave viewport */
  --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Overshoot */
  --shadow-glow: 0 0 24px rgba(59, 130, 246, 0.35);  /* Brand glow */
  --shadow-elev-1: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-elev-2: 0 12px 32px rgba(0, 0, 0, 0.5);
  --layout-max-w: 1200px;  /* Container max-width */
  --layout-pad-x: clamp(1rem, 3vw, 2rem);  /* Horizontal padding (fluid) */

  /* ----- Legacy aliases (delete once all selectors migrated) ----- */
  --background: var(--color-bg-base);
  --foreground: var(--color-text-base);
  --primary: var(--color-brand-500);
  --primary-hover: var(--color-brand-600);
  --primary-foreground: var(--color-text-base);
  --secondary: var(--color-border-subtle);
  --secondary-hover: var(--color-border-strong);
  --secondary-foreground: var(--color-text-base);
  --muted: var(--color-border-strong);
  --muted-foreground: var(--color-text-dim);
  --accent: var(--color-brand-500);
  --accent-foreground: var(--color-text-base);
  --destructive: var(--color-state-danger);
  --destructive-foreground: var(--color-text-base);
  --border: var(--color-border-subtle);
  --input: var(--color-border-subtle);
  --ring: var(--color-brand-500);
  --radius: var(--radius-xl);
  --blue-50: var(--color-brand-50);
  --blue-100: var(--color-brand-100);
  --blue-200: var(--color-brand-200);
  --blue-300: var(--color-brand-300);
  --blue-400: var(--color-brand-400);
  --blue-500: var(--color-brand-500);
  --blue-600: var(--color-brand-600);
  --blue-700: var(--color-brand-700);
  --blue-800: var(--color-brand-800);
  --blue-900: var(--color-brand-900);
  --bg-base: var(--color-bg-base);
  --bg-deep: var(--color-bg-base);
  --bg-card: var(--color-bg-card);
  --bg-card-hover: var(--color-bg-card-hover);
  --bg-elev: var(--color-bg-elev);
  --grid: var(--color-brand-alpha-grid);
  --grid-strong: var(--color-brand-alpha-grid-strong);
  --border-strong: var(--color-brand-alpha-border);
  --accent-2: var(--color-brand-400);
  --accent-soft: var(--color-brand-alpha-soft);
  --accent-soft-2: var(--color-brand-alpha-soft-2);
  --accent-glow: var(--shadow-glow);
  --text: var(--color-text-soft);
  --text-dim: var(--color-text-dim);
  --text-muted: var(--color-text-muted);
  --ok: var(--color-state-ok);
  --warn: var(--color-state-warn);
  --danger: var(--color-state-danger);
  --radius-sm: var(--radius-sm);
  --radius-lg: var(--radius-lg);
  --max-w: var(--layout-max-w);
  --pad-x: var(--layout-pad-x);
  --font-sans: var(--type-family-sans);
  --font-mono: var(--type-family-mono);
}