/* ── YT SEO Architect Design Tokens ────────────────── */
/* Single source of truth for all visual properties     */
/* Import: @import './design-tokens.css';               */
/* ──────────────────────────────────────────────────── */

:root {
  /* ── Brand Colors ── */
  --cyan: #00f2ff;
  --cyan-hover: #00d7e6;
  --cyan-glow: rgba(0, 242, 255, 0.25);
  --green: #00ff88;
  --green-glow: rgba(0, 255, 136, 0.25);

  /* ── Background Surfaces (Linear-style luminance stack) ── */
  --bg-deep: #06070a;
  --bg-page: #0a0b10;
  --bg-oled: #000000;
  --bg-elevated: rgba(16, 20, 32, 0.7);
  --bg-hover: rgba(16, 20, 32, 0.9);
  --bg-glass: rgba(10, 11, 16, 0.6);
  --bg-surface: rgba(16, 20, 32, 0.6);

  /* ── Text Hierarchy ── */
  --text-primary: #f0f2f5;
  --text-secondary: #a8b2c1;
  --text-muted: #5d6676;
  --text-white: #ffffff;

  /* ── Borders ── */
  --border: rgba(255, 255, 255, 0.06);
  --border-solid: rgba(0, 242, 255, 0.12);
  --border-hover: rgba(0, 242, 255, 0.2);

  /* ── Shadows (Vercel multi-layer technique) ── */
  --card-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06),
                 0 2px 4px rgba(0, 0, 0, 0.3);
  --card-shadow-hover: 0 0 0 1px rgba(0, 242, 255, 0.15),
                       0 8px 24px rgba(0, 0, 0, 0.4),
                       0 0 40px rgba(0, 242, 255, 0.05);
  --glass-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.9),
                   0 0 20px rgba(0, 242, 255, 0.05);

  /* ── Typography ── */
  --font: 'Geist', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', 'Fira Code', monospace;
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;

  /* ── Border Radius ── */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 9999px;

  /* ── Spacing (8px scale) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ── Transitions ── */
  --ease-precise: cubic-bezier(0.23, 1, 0.32, 1);
  --transition-fast: 0.2s var(--ease-precise);
  --transition-normal: 0.3s var(--ease-precise);
  --transition-slow: 0.5s var(--ease-precise);

  /* ── Z-Index Scale ── */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}