/* ============================================
   KOBYGEN — DESIGN TOKENS 2026
   Shared brand system (site + account + admin)
   ============================================ */

:root {
    /* Brand core — DO NOT change identity */
    --bg-deep: #0A0A0F;
    --bg-elevated: #0F0F19;
    --bg-card: rgba(15, 15, 25, 0.72);
    --bg-card-solid: #0c0c16;

    --neon-cyan: #00F0FF;
    --neon-pink: #FF003C;
    --neon-gold: #FFD700;
    --neon-purple: #8B00FF;
    --neon-green: #00FF88;

    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.72);
    --text-muted: rgba(255, 255, 255, 0.42);

    /* Glass & surfaces */
    --glass-bg: rgba(15, 15, 30, 0.62);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(0, 240, 255, 0.22);
    --glass-blur: 24px;
    --glass-blur-heavy: 40px;

    /* Gradients */
    --gradient-cyan: linear-gradient(135deg, #00F0FF 0%, #0088FF 100%);
    --gradient-pink: linear-gradient(135deg, #FF003C 0%, #FF6600 100%);
    --gradient-gold: linear-gradient(135deg, #FFD700 0%, #FF8C00 100%);
    --gradient-purple: linear-gradient(135deg, #8B00FF 0%, #FF003C 100%);
    --gradient-hero: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 240, 255, 0.12) 0%, transparent 60%),
                     radial-gradient(ellipse 60% 50% at 80% 20%, rgba(255, 0, 60, 0.06) 0%, transparent 50%),
                     radial-gradient(ellipse 50% 40% at 10% 80%, rgba(139, 0, 255, 0.05) 0%, transparent 50%);

    /* Glow */
    --glow-cyan: 0 0 24px rgba(0, 240, 255, 0.35);
    --glow-cyan-strong: 0 0 40px rgba(0, 240, 255, 0.55), 0 0 80px rgba(0, 240, 255, 0.2);
    --glow-pink: 0 0 24px rgba(255, 0, 60, 0.35);
    --glow-gold: 0 0 24px rgba(255, 215, 0, 0.35);
    --glow-purple: 0 0 24px rgba(139, 0, 255, 0.3);

    /* Typography — Exo 2 display, Manrope body, Bangers accent (Latin) */
    --font-display: 'Exo 2', sans-serif;
    --font-accent: 'Bangers', cursive;
    --font-heading: var(--font-accent);
    --font-body: 'Manrope', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --text-root: clamp(16px, 0.25vw + 15.5px, 18px);
    --font-weight-body: 400;
    --font-weight-body-medium: 500;
    --font-weight-body-strong: 600;
    --font-weight-display: 700;
    --font-weight-display-heavy: 800;
    --font-weight-display-black: 900;
    --tracking-display: 0.05em;
    --tracking-display-wide: 0.08em;

    /* Spacing scale (4px base) */
    --space-0: 0;
    --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;

    /* Spacing & layout */
    --section-padding: clamp(80px, 12vw, 140px) 0;
    --container-max: 1400px;
    --container-padding: clamp(1rem, 4vw, 2rem);
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-pill: 50px;

    /* Typography scale — larger, bolder platform type */
    --text-xs: clamp(0.65rem, 0.2vw + 0.6rem, 0.72rem);
    --text-sm: clamp(0.78rem, 0.25vw + 0.72rem, 0.875rem);
    --text-base: clamp(1rem, 0.2vw + 0.95rem, 1.125rem);
    --text-lg: clamp(1.1rem, 0.35vw + 1rem, 1.25rem);
    --text-xl: clamp(1.2rem, 0.5vw + 1.05rem, 1.375rem);
    --text-2xl: clamp(1.4rem, 1.2vw + 1.1rem, 1.875rem);
    --text-3xl: clamp(1.75rem, 2vw + 1.2rem, 2.375rem);
    --text-4xl: clamp(2.1rem, 3vw + 1.3rem, 3.625rem);
    --text-5xl: clamp(2.5rem, 4vw + 1.4rem, 4.25rem);
    --text-6xl: clamp(3rem, 5vw + 1.5rem, 5.75rem);
    --leading-tight: 1.12;
    --leading-snug: 1.32;
    --leading-normal: 1.65;
    --leading-relaxed: 1.78;
    --tracking-wide: 0.08em;
    --tracking-wider: 0.12em;
    --tracking-widest: 0.2em;

    /* Motion */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-instant: 0.1s;
    --duration-fast: 0.18s;
    --duration-normal: 0.38s;
    --duration-slow: 0.65s;
    --duration-slower: 1s;
    --transition-fast: var(--duration-fast) var(--ease-out-expo);
    --transition-smooth: var(--duration-normal) var(--ease-out-expo);
    --transition-slow: var(--duration-slow) var(--ease-out-expo);

    /* Elevation & shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.55);
    --shadow-card: var(--shadow-md);
    --shadow-card-hover: var(--shadow-lg), var(--glow-cyan);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --shadow-inset-deep: inset 0 2px 8px rgba(0, 0, 0, 0.35);

    /* Glass surfaces */
    --glass-bg-strong: rgba(12, 12, 24, 0.88);
    --glass-bg-subtle: rgba(15, 15, 30, 0.45);
    --surface-elevated: rgba(18, 18, 32, 0.92);
    --surface-overlay: rgba(6, 6, 12, 0.94);

    /* Focus & interaction */
    --focus-ring: 0 0 0 2px var(--bg-deep), 0 0 0 4px rgba(0, 240, 255, 0.45);
    --focus-ring-pink: 0 0 0 2px var(--bg-deep), 0 0 0 4px rgba(255, 0, 60, 0.4);

    /* Z-index scale */
    --z-base: 1;
    --z-elevated: 10;
    --z-dropdown: 100;
    --z-header: 1000;
    --z-overlay: 9000;
    --z-modal: 10000;
    --z-toast: 10001;

    /* Admin aliases (same brand) */
    --bg-primary: #06060c;
    --bg-secondary: #0c0c16;
    --bg-tertiary: #111122;
    --border-color: rgba(255, 255, 255, 0.05);
    --border-hover: rgba(255, 255, 255, 0.12);
    --sidebar-width: 268px;
    --header-height: 72px;

    /* Platform 2026 — extended scale */
    --space-14: 3.5rem;
    --space-18: 4.5rem;
    --space-32: 8rem;

    --text-7xl: clamp(3.5rem, 7vw, 6.5rem);

    /* Glow presets (composable) */
    --glow-cyan-soft: 0 0 16px rgba(0, 240, 255, 0.2);
    --glow-pink-soft: 0 0 16px rgba(255, 0, 60, 0.2);
    --glow-purple-soft: 0 0 20px rgba(139, 0, 255, 0.25);
    --glow-gold-soft: 0 0 18px rgba(255, 215, 0, 0.22);
    --glow-brand: var(--glow-cyan), var(--glow-purple-soft);
    --glow-luxury: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 48px rgba(0, 240, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);

    /* Glass tiers */
    --glass-border-strong: rgba(0, 240, 255, 0.28);
    --glass-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 42%, rgba(0, 240, 255, 0.06) 100%);

    /* Motion — platform curves */
    --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-micro: 0.12s;
    --duration-medium: 0.48s;

    /* Touch & safe area */
    --touch-min: 44px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --header-offset: calc(var(--header-height) + var(--safe-top));

    /* Platform surfaces */
    --surface-card-lux: linear-gradient(155deg, rgba(18, 18, 32, 0.94) 0%, rgba(10, 10, 18, 0.88) 55%, rgba(139, 0, 255, 0.04) 100%);
    --surface-hero-depth: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(0, 240, 255, 0.14), transparent 55%);

    /* Premium layer aliases (--kg-*) */
    --kg-glass: var(--glass-bg);
    --kg-glass-strong: var(--glass-bg-strong);
    --kg-glass-subtle: var(--glass-bg-subtle);
    --kg-glass-border: var(--glass-border);
    --kg-glass-border-hover: var(--glass-border-hover);
    --kg-glow: var(--glow-luxury);
    --kg-glow-cyan: var(--glow-cyan);
    --kg-surface-lux: var(--surface-card-lux);
    --radius-3xl: 44px;
    --shadow-premium: var(--shadow-lg), var(--glow-cyan-soft), var(--shadow-inset);
}