/* Ko2 Design System - Unified CSS Variables */
/* Design Direction: "Void Luxe" - Deep space meets luxury tech */

:root {
    /* =================================
       TYPOGRAPHY - Premium Fonts
       ================================= */
    --font-display: 'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* =================================
       BACKGROUNDS - Deeper Void
       ================================= */
    --bg-void: #050408;
    --bg-void-deep: #08070c;
    --bg-primary: #0c0a12;
    --bg-secondary: #12101a;
    --bg-tertiary: #1a1724;
    --bg-elevated: #201c2a;
    --bg-surface: #252133;
    --bg-glass: rgba(26, 23, 36, 0.85);
    --bg-glass-heavy: rgba(18, 16, 26, 0.95);

    /* =================================
       BRAND COLORS - Enhanced Palette
       ================================= */
    /* Primary Purple - Full Scale */
    --brand-50: #ffc5ff;
    --brand-100: #ffbbff;
    --brand-200: #efa8ff;
    --brand-300: #d394ff;
    --brand-400: #b781ff;
    --brand-500: #9b6dff;
    --brand-600: #825cd6;
    --brand-700: #694aad;
    --brand-800: #513985;
    --brand-900: #38275c;
    --brand-950: #2b1f47;

    /* Legacy mappings */
    --color-purple-400: #b088ff;
    --color-purple-500: #9b6dff;
    --color-purple-600: #7c4ddb;
    --color-purple-glow: rgba(155, 109, 255, 0.25);

    /* Secondary - Cyan */
    --color-cyan-400: #6bc5ff;
    --color-cyan-500: #4ab3ff;
    --color-cyan-600: #2d9fe8;
    --color-cyan-glow: rgba(74, 179, 255, 0.25);

    /* Semantic */
    --color-success: #10b981;
    --color-success-dark: #059669;
    --color-success-glow: rgba(16, 185, 129, 0.25);
    --color-error: #ef4444;
    --color-error-dark: #dc2626;
    --color-error-glow: rgba(239, 68, 68, 0.25);
    --color-warning: #f59e0b;
    --color-warning-dark: #d97706;
    --color-warning-glow: rgba(245, 158, 11, 0.25);
    --color-info: #4ab3ff;

    /* Social / Brand Colors */
    --color-telegram: #0088cc;
    --color-telegram-dark: #006699;
    --color-discord: #5865F2;
    --color-discord-dark: #4752c4;
    --color-google-bg: #ffffff;
    --color-google-text: #1f1f1f;

    /* =================================
       PREMIUM GLOW EFFECTS
       ================================= */
    --glow-purple-sm: 0 0 20px rgba(155, 109, 255, 0.25);
    --glow-purple: 0 0 40px rgba(155, 109, 255, 0.35);
    --glow-purple-lg: 0 0 60px rgba(155, 109, 255, 0.4);
    --glow-cyan-sm: 0 0 20px rgba(74, 179, 255, 0.25);
    --glow-cyan: 0 0 40px rgba(74, 179, 255, 0.35);
    --glow-cyan-lg: 0 0 60px rgba(74, 179, 255, 0.4);
    --glow-success: 0 0 30px rgba(16, 185, 129, 0.3);

    /* =================================
       TEXT HIERARCHY
       ================================= */
    --text-primary: #f0eef5;
    --text-heading: #ffffff;
    --text-secondary: #a8a4b4;
    --text-muted: #706c80;
    --text-disabled: #4a4656;

    /* =================================
       BORDERS
       ================================= */
    --border-subtle: rgba(155, 109, 255, 0.08);
    --border-default: rgba(155, 109, 255, 0.15);
    --border-strong: rgba(155, 109, 255, 0.25);
    --border-focus: rgba(155, 109, 255, 0.5);

    /* =================================
       SHADOWS - Enhanced Depth
       ================================= */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-glow-purple: 0 8px 32px rgba(155, 109, 255, 0.3);
    --shadow-glow-cyan: 0 8px 32px rgba(74, 179, 255, 0.3);

    /* =================================
       BORDER RADIUS
       ================================= */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* =================================
       SPACING 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;

    /* =================================
       TRANSITIONS - Premium Easing
       ================================= */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    --duration-instant: 100ms;
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;

    /* Stagger delays for orchestrated reveals */
    --stagger-1: 50ms;
    --stagger-2: 100ms;
    --stagger-3: 150ms;
    --stagger-4: 200ms;
    --stagger-5: 250ms;

    /* =================================
       TYPOGRAPHY SCALE
       ================================= */
    --font-size-h1: 48px;
    --font-size-h1-mobile: 32px;
    --font-size-h2: 36px;
    --font-size-h2-mobile: 28px;
    --font-size-h3: 28px;
    --font-size-h3-mobile: 22px;
    --font-size-h4: 22px;
    --font-size-body: 16px;
    --font-size-sm: 14px;
    --font-size-xs: 12px;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;
    --letter-spacing-wider: 0.05em;

    /* =================================
       Z-INDEX SCALE
       ================================= */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-sidebar: 300;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-dialog: 1050;
    --z-toast: 1100;
    --z-tooltip: 1200;

    /* =================================
       SAFE AREA INSETS
       ================================= */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* =================================
   PREMIUM GRAIN TEXTURE OVERLAY
   ================================= */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.025;
    pointer-events: none;
    z-index: 9999;
}

/* =================================
   BASE TYPOGRAPHY STYLES
   ================================= */
body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.heading {
    font-family: var(--font-display);
    letter-spacing: var(--letter-spacing-tight);
}

code, pre, .mono {
    font-family: var(--font-mono);
}