/* ═══════════════════════════════════════════════════
   CONVERTORIX / KLOZY — DESIGN TOKENS
   Source of truth: Klozy_Color_Palette.pdf
   Fonts: Syne (headings) · DM Sans (body) · DM Mono (code/labels)
   ═══════════════════════════════════════════════════ */

:root {
    /* ── Brand Accents ── */
    --cyan:          #00E5FF;
    --purple:        #7B61FF;
    --gradient:      linear-gradient(135deg, #00E5FF, #7B61FF);
    --gradient-hot:  linear-gradient(135deg, #FF6B6B, #FFD166);
    --gradient-conv: linear-gradient(135deg, #06D6A0, #00E5FF);

    /* ── Typography ── */
    --font-heading:  'Syne', sans-serif;
    --font-body:     'DM Sans', sans-serif;
    --font-mono:     'DM Mono', monospace;

    /* ── Type Scale ── */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.8125rem;  /* 13px */
    --text-base: 0.875rem;   /* 14px */
    --text-md:   1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.5rem;     /* 24px */
    --text-2xl:  2rem;       /* 32px */
    --text-3xl:  2.5rem;     /* 40px */

    /* ── Spacing ── */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* ── Radii ── */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  14px;
    --radius-xl:  20px;
    --radius-full: 9999px;

    /* ── Shadows (dark mode tuned) ── */
    --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-cyan:   0 0 20px rgba(0,229,255,0.15);
    --shadow-glow-purple: 0 0 20px rgba(123,97,255,0.15);
    --shadow-glow-hot:    0 0 20px rgba(255,107,107,0.15);

    /* ── Layout ── */
    --sidebar-width:     260px;
    --sidebar-collapsed: 72px;
    --topbar-height:     64px;
    --klozy-panel-width: 380px;

    /* ── Transitions ── */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   400ms;

    /* ── Z-index layers ── */
    --z-sidebar:  100;
    --z-topbar:   200;
    --z-dropdown: 300;
    --z-modal:    400;
    --z-drawer:   400;
    --z-toast:    500;
    --z-klozy:    350;
    --z-cmd:      450;
    --z-overlay:  90;
}

/* ═══════════ DARK THEME (default) ═══════════ */
[data-theme="dark"] {
    --bg-primary:       #080B14;
    --bg-secondary:     #0E1422;
    --surface:          #0E1422;
    --surface-elevated: #141926;
    --surface-hover:    #1C2333;
    --border:           #1E2A3A;
    --border-subtle:    #151D2D;

    --text-primary:   #F0F4FF;
    --text-secondary: #8A97B0;
    --text-muted:     #4A5568;

    --accent:    #00E5FF;
    --accent-2:  #7B61FF;
    --success:   #06D6A0;
    --warning:   #FFD166;
    --danger:    #FF6B6B;
    --info:      #00E5FF;

    --input-bg:     #1C2333;
    --input-border: #1E2A3A;
    --input-focus:  #00E5FF;

    --scrollbar-track: #0E1422;
    --scrollbar-thumb: #1E2A3A;
}

/* ═══════════ LIGHT THEME ═══════════ */
[data-theme="light"] {
    --bg-primary:       #F5F7FA;
    --bg-secondary:     #FFFFFF;
    --surface:          #FFFFFF;
    --surface-elevated: #F0F2F5;
    --surface-hover:    #E8ECF1;
    --border:           #DDE2EA;
    --border-subtle:    #E8ECF1;

    --text-primary:   #111827;
    --text-secondary: #6B7280;
    --text-muted:     #9CA3AF;

    --accent:    #0097A7;
    --accent-2:  #6C4FD8;
    --success:   #059669;
    --warning:   #D97706;
    --danger:    #DC2626;
    --info:      #0097A7;

    --input-bg:     #F5F7FA;
    --input-border: #DDE2EA;
    --input-focus:  #0097A7;

    --shadow-sm:  0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);
    --shadow-glow-cyan:   0 0 20px rgba(0,151,167,0.1);
    --shadow-glow-purple: 0 0 20px rgba(108,79,216,0.1);

    --scrollbar-track: #F0F2F5;
    --scrollbar-thumb: #D1D5DB;
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}