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

/* -- Midnight Theme (Default) --------------------------------------------- */
:root,
[data-theme="midnight"] {
    color-scheme: dark;
    /* 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;

    /* Semantic dim (backgrounds / badges) */
    --color-profit-dim:  rgba(16, 185, 129, 0.12);
    --color-loss-dim:    rgba(239, 68, 68, 0.12);
    --color-warning-dim: rgba(245, 158, 11, 0.12);
    --color-danger-dim:  rgba(239, 68, 68, 0.12);
    --color-info-dim:    rgba(59, 130, 246, 0.12);

    /* 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;
}

/* -- Light Theme ---------------------------------------------------------- */
[data-theme="light"] {
    color-scheme: light;
    --bg-deepest:    #eef0f4;
    --bg-base:       #f8f9fb;
    --bg-surface:    #ffffff;
    --bg-elevated:   #f0f2f6;
    --bg-overlay:    rgba(255, 255, 255, 0.90);
    --bg-hover:      rgba(0, 0, 0, 0.04);
    --bg-active:     rgba(0, 0, 0, 0.08);

    --border-subtle:  rgba(0, 0, 0, 0.08);
    --border-default: rgba(0, 0, 0, 0.12);
    --border-strong:  rgba(0, 0, 0, 0.20);

    --text-primary:   #1a1a2e;
    --text-secondary: #5a6072;
    --text-muted:     #8b92a5;
    --text-disabled:  #b0b7c8;
    --text-inverse:   #ffffff;

    --accent-teal:       #0d9668;
    --accent-teal-hover: #0fb77e;
    --accent-teal-dim:   rgba(13, 150, 104, 0.12);

    --accent-purple:       #7c3aed;
    --accent-purple-hover: #8b5cf6;
    --accent-purple-dim:   rgba(124, 58, 237, 0.10);

    --accent-amber:       #d97706;
    --accent-amber-hover: #f59e0b;
    --accent-amber-dim:   rgba(217, 119, 6, 0.10);

    --accent-cyan:       #0891b2;
    --accent-cyan-hover: #06b6d4;
    --accent-cyan-dim:   rgba(8, 145, 178, 0.10);

    --accent-rose:       #e11d48;
    --accent-rose-hover: #f43f5e;
    --accent-rose-dim:   rgba(225, 29, 72, 0.10);

    --accent-blue:       #2563eb;
    --accent-blue-hover: #3b82f6;
    --accent-blue-dim:   rgba(37, 99, 235, 0.10);

    --color-success:  #0d9668;
    --color-warning:  #d97706;
    --color-danger:   #dc2626;
    --color-info:     #2563eb;
    --color-long:     #0d9668;
    --color-short:    #dc2626;
    --color-profit:   #0d9668;
    --color-loss:     #dc2626;

    --color-profit-dim:  rgba(13, 150, 104, 0.10);
    --color-loss-dim:    rgba(220, 38, 38, 0.10);
    --color-warning-dim: rgba(217, 119, 6, 0.10);
    --color-danger-dim:  rgba(220, 38, 38, 0.10);
    --color-info-dim:    rgba(37, 99, 235, 0.10);

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-glow-teal:   0 0 20px rgba(13, 150, 104, 0.15);
    --shadow-glow-purple: 0 0 20px rgba(124, 58, 237, 0.15);
    --shadow-glow-rose:   0 0 20px rgba(225, 29, 72, 0.15);
}

/* -- Obsidian Theme ------------------------------------------------------- */
[data-theme="obsidian"] {
    color-scheme: dark;
    --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);

    --accent-teal:       #a78bfa;
    --accent-teal-hover: #c084fc;
    --accent-teal-dim:   rgba(167, 139, 250, 0.15);

    --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);
    --shadow-glow-teal: 0 0 20px rgba(167, 139, 250, 0.2);
}

/* -- Cyber Theme ---------------------------------------------------------- */
[data-theme="cyber"] {
    color-scheme: dark;
    --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);
}

/* -- Ember Theme ---------------------------------------------------------- */
[data-theme="ember"] {
    color-scheme: dark;
    --bg-deepest:    #0c0604;
    --bg-base:       #140c08;
    --bg-surface:    #1e1410;
    --bg-elevated:   #2a1c16;
    --bg-overlay:    rgba(12, 6, 4, 0.85);

    --border-subtle:  rgba(245, 158, 11, 0.08);
    --border-default: rgba(245, 158, 11, 0.14);
    --border-strong:  rgba(245, 158, 11, 0.22);

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

    --accent-purple:     #ef4444;
    --accent-purple-dim: rgba(239, 68, 68, 0.15);

    --accent-cyan:       #fb923c;
    --accent-cyan-dim:   rgba(251, 146, 60, 0.15);

    --color-success: #f59e0b;
    --color-long:    #f59e0b;
    --color-profit:  #22c55e;
    --color-profit-dim: rgba(34, 197, 94, 0.12);

    --shadow-glow-teal: 0 0 20px rgba(245, 158, 11, 0.2);
}

/* -- Aurora Theme --------------------------------------------------------- */
[data-theme="aurora"] {
    color-scheme: dark;
    --bg-deepest:    #060813;
    --bg-base:       #0a0d1a;
    --bg-surface:    #131729;
    --bg-elevated:   #1c2038;
    --bg-overlay:    rgba(6, 8, 19, 0.85);

    --border-subtle:  rgba(168, 85, 247, 0.08);
    --border-default: rgba(168, 85, 247, 0.14);
    --border-strong:  rgba(168, 85, 247, 0.22);

    --accent-teal:       #a855f7;
    --accent-teal-hover: #c084fc;
    --accent-teal-dim:   rgba(168, 85, 247, 0.15);

    --accent-purple:     #ec4899;
    --accent-purple-dim: rgba(236, 72, 153, 0.15);

    --accent-cyan:       #818cf8;
    --accent-cyan-dim:   rgba(129, 140, 248, 0.15);

    --accent-rose:       #f472b6;
    --accent-rose-dim:   rgba(244, 114, 182, 0.15);

    --color-success: #a855f7;
    --color-long:    #a855f7;
    --color-profit:  #22c55e;
    --color-profit-dim: rgba(34, 197, 94, 0.12);

    --shadow-glow-teal:   0 0 20px rgba(168, 85, 247, 0.25);
    --shadow-glow-purple: 0 0 20px rgba(236, 72, 153, 0.25);
}