/**
 * ═══════════════════════════════════════════════════════════════
 * ALLDEBRID PANEL — Design System Tokens
 * UI/UX Pro Max → Dark Mode OLED + Custom Panel Theme
 * ═══════════════════════════════════════════════════════════════
 */

:root {
    /* ── Color Palette ── */
    --color-bg-deep:      #020617;     /* Deepest background (body) */
    --color-bg-primary:   #0a0f1e;     /* Main content background */
    --color-bg-card:      #0f172a;     /* Card surface */
    --color-bg-card-alt:  #131c33;     /* Elevated card / hover */
    --color-bg-input:     #0c1425;     /* Input fields */
    --color-bg-overlay:   rgba(2, 6, 23, 0.75);

    /* ── Accent Colors ── */
    --color-accent:       #ff6b35;     /* Alldebrid brand orange */
    --color-accent-hover: #ff8c5a;
    --color-accent-dim:   rgba(255, 107, 53, 0.12);
    --color-accent-glow:  rgba(255, 107, 53, 0.25);

    --color-green:        #22c55e;     /* CTA / Success */
    --color-green-dim:    rgba(34, 197, 94, 0.12);
    --color-cyan:         #22d3ee;     /* Highlights */
    --color-cyan-dim:     rgba(34, 211, 238, 0.10);
    --color-purple:       #a78bfa;     /* Streaming / processing */
    --color-purple-dim:   rgba(167, 139, 250, 0.12);
    --color-blue:         #3b82f6;     /* Info / downloading */
    --color-blue-dim:     rgba(59, 130, 246, 0.12);
    --color-yellow:       #fbbf24;     /* Warning / queued */
    --color-yellow-dim:   rgba(251, 191, 36, 0.12);
    --color-red:          #ef4444;     /* Error / danger */
    --color-red-dim:      rgba(239, 68, 68, 0.10);

    /* ── Text Colors ── */
    --color-text:         #f1f5f9;     /* Primary text */
    --color-text-secondary: #94a3b8;   /* Secondary / muted */
    --color-text-tertiary:  #475569;   /* Disabled / hints */

    /* ── Border Colors ── */
    --color-border:       rgba(148, 163, 184, 0.08);
    --color-border-hover: rgba(148, 163, 184, 0.15);
    --color-border-focus: rgba(255, 107, 53, 0.5);

    /* ── Typography ── */
    --font-sans: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.85rem;
    --text-base: 0.938rem;
    --text-md:   1.05rem;
    --text-lg:   1.2rem;
    --text-xl:   1.5rem;
    --text-2xl:  1.85rem;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ── Spacing ── */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  14px;
    --space-lg:  20px;
    --space-xl:  28px;
    --space-2xl: 40px;
    --space-3xl: 56px;

    /* ── Border Radius ── */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   18px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(255, 107, 53, 0.08);
    --shadow-glow-green: 0 0 20px rgba(34, 197, 94, 0.1);

    /* ── Transitions ── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:   120ms;
    --duration-normal: 200ms;
    --duration-slow:   350ms;

    /* ── Z-Index Scale ── */
    --z-content:   1;
    --z-sticky:    100;
    --z-sidebar:   500;
    --z-overlay:   900;
    --z-modal:     1000;
    --z-toast:     2000;

    /* ── Layout ── */
    --sidebar-width: 260px;
    --topbar-height: 60px;
}