/* ==========================================================================
   Design Tokens - Jabbr Dashboard v2
   Three themes: Midnight (default), Obsidian, Cyber
   ========================================================================== */

/* ── Midnight Theme (Default) ───────────────────────────────────────────── */
:root,
[data-theme="midnight"] {
    /* Background layers */
    --bg-deepest:    #060a13;
    --bg-base:       #0a0e17;
    --bg-surface:    #111827;
    --bg-elevated:   #1a2235;
    --bg-overlay:    rgba(6, 10, 19, 0.85);
    --bg-hover:      rgba(255, 255, 255, 0.04);
    --bg-active:     rgba(255, 255, 255, 0.08);

    /* Borders */
    --border-subtle:  rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.10);
    --border-strong:  rgba(255, 255, 255, 0.16);
    --border-focus:   var(--accent-teal);

    /* Text */
    --text-primary:   #f0f4f8;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;
    --text-disabled:  #475569;
    --text-inverse:   #0a0e17;

    /* Accent palette */
    --accent-teal:    #10b981;
    --accent-teal-hover: #34d399;
    --accent-teal-dim:   rgba(16, 185, 129, 0.15);

    --accent-purple:  #8b5cf6;
    --accent-purple-hover: #a78bfa;
    --accent-purple-dim:   rgba(139, 92, 246, 0.15);

    --accent-amber:   #f59e0b;
    --accent-amber-hover:  #fbbf24;
    --accent-amber-dim:    rgba(245, 158, 11, 0.15);

    --accent-cyan:    #06b6d4;
    --accent-cyan-hover:   #22d3ee;
    --accent-cyan-dim:     rgba(6, 182, 212, 0.15);

    --accent-rose:    #f43f5e;
    --accent-rose-hover:   #fb7185;
    --accent-rose-dim:     rgba(244, 63, 94, 0.15);

    --accent-blue:    #3b82f6;
    --accent-blue-hover:   #60a5fa;
    --accent-blue-dim:     rgba(59, 130, 246, 0.15);

    /* Semantic colors */
    --color-success:  #10b981;
    --color-warning:  #f59e0b;
    --color-danger:   #ef4444;
    --color-info:     #3b82f6;
    --color-long:     #10b981;
    --color-short:    #ef4444;
    --color-profit:   #10b981;
    --color-loss:     #ef4444;

    /* 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 24px rgba(0, 0, 0, 0.5);
    --shadow-glow-teal:   0 0 20px rgba(16, 185, 129, 0.2);
    --shadow-glow-purple: 0 0 20px rgba(139, 92, 246, 0.2);
    --shadow-glow-rose:   0 0 20px rgba(244, 63, 94, 0.2);

    /* Spacing */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  12px;
    --space-lg:  16px;
    --space-xl:  24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

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

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

    --text-xs:   0.6875rem;  /* 11px */
    --text-sm:   0.75rem;    /* 12px */
    --text-base: 0.8125rem;  /* 13px */
    --text-md:   0.875rem;   /* 14px */
    --text-lg:   1rem;       /* 16px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  2rem;       /* 32px */

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

    /* Layout dimensions */
    --sidebar-width:      240px;
    --sidebar-collapsed:  64px;
    --header-height:      56px;
    --status-bar-height:  32px;
    --mobile-nav-height:  60px;

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   400ms ease;

    /* Z-index layers */
    --z-base:       1;
    --z-dropdown:   100;
    --z-sticky:     200;
    --z-header:     300;
    --z-sidebar:    400;
    --z-modal:      500;
    --z-toast:      600;
    --z-tooltip:    700;
}

/* ── Obsidian Theme ─────────────────────────────────────────────────────── */
[data-theme="obsidian"] {
    --bg-deepest:    #000000;
    --bg-base:       #0a0a0a;
    --bg-surface:    #141414;
    --bg-elevated:   #1e1e1e;
    --bg-overlay:    rgba(0, 0, 0, 0.85);

    --border-subtle:  rgba(255, 255, 255, 0.05);
    --border-default: rgba(255, 255, 255, 0.08);
    --border-strong:  rgba(255, 255, 255, 0.14);

    --text-primary:   #e4e4e7;
    --text-secondary: #a1a1aa;
    --text-muted:     #71717a;

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.7);
}

/* ── Cyber Theme ────────────────────────────────────────────────────────── */
[data-theme="cyber"] {
    --bg-deepest:    #050d1a;
    --bg-base:       #0a1628;
    --bg-surface:    #0f1f3d;
    --bg-elevated:   #162a4a;
    --bg-overlay:    rgba(5, 13, 26, 0.85);

    --border-subtle:  rgba(59, 130, 246, 0.08);
    --border-default: rgba(59, 130, 246, 0.14);
    --border-strong:  rgba(59, 130, 246, 0.22);

    --accent-teal:       #00e5ff;
    --accent-teal-hover: #40efff;
    --accent-teal-dim:   rgba(0, 229, 255, 0.12);

    --accent-purple:     #b366ff;
    --accent-purple-dim: rgba(179, 102, 255, 0.12);

    --accent-amber:      #ffab00;
    --accent-amber-dim:  rgba(255, 171, 0, 0.12);

    --shadow-glow-teal:   0 0 24px rgba(0, 229, 255, 0.25);
    --shadow-glow-purple: 0 0 24px rgba(179, 102, 255, 0.25);
}