/* ============================================
   YOOSH Design Tokens
   Single source of truth for all design values.
   ============================================ */

:root {
    /* -- Backgrounds -- */
    --bg-void: #0A0A0F;
    --bg-obsidian: #12121A;
    --bg-surface: #1A1A2E;
    --bg-elevated: #222238;

    /* -- Brand Colors -- */
    --primary: #8B5CF6;
    --primary-glow: #A78BFA;
    --primary-muted: #7C3AED;
    --secondary: #06D6A0;
    --secondary-muted: #04B886;
    --accent-warm: #F59E0B;
    --accent-warm-muted: #D97706;
    --danger: #EF4444;

    /* -- Text -- */
    --text-primary: #F0F0F5;
    --text-secondary: #8888A0;
    --text-muted: #55556A;
    --text-inverse: #0A0A0F;

    /* -- Borders -- */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-medium: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-primary: rgba(139, 92, 246, 0.3);

    /* -- Gradients -- */
    --gradient-hero: linear-gradient(135deg, #8B5CF6 0%, #06D6A0 100%);
    --gradient-hero-subtle: linear-gradient(135deg, rgba(139,92,246,0.15) 0%, rgba(6,214,160,0.08) 100%);
    --gradient-card: linear-gradient(180deg, rgba(26,26,46,0.8) 0%, rgba(18,18,26,0.9) 100%);
    --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(139,92,246,0.15) 0%, transparent 70%);
    --gradient-cta: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);

    /* -- Shadows -- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.2);
    --shadow-glow-strong: 0 0 60px rgba(139, 92, 246, 0.3);

    /* -- Typography -- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-display: 'Space Grotesk', 'Inter', sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;

    --leading-tight: 1.1;
    --leading-snug: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;

    /* -- Spacing -- */
    --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;
    --space-24: 6rem;
    --space-32: 8rem;

    /* -- Border Radius -- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* -- Transitions -- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* -- Layout -- */
    --max-width: 1200px;
    --max-width-narrow: 800px;
    --nav-height: 64px;
}