/* ==========================================================================
   SKÖLD PLATFORM DESIGN TOKENS (tokens.css)
   ========================================================================== */

:root,
[data-theme="dark"] {
    /* ----------------------------------------------------------------------
       Typography Tokens
       ---------------------------------------------------------------------- */
    --font-sans: 'Exo 2', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Inconsolata', monospace;

    /* ----------------------------------------------------------------------
       Surfaces & Backgrounds (Dark Tactical Cyberpunk)
       ---------------------------------------------------------------------- */
    --color-bg-base: #090C15;
    --color-bg-card: #151A28;
    --color-bg-subcard: rgba(0, 0, 0, 0.35);
    --color-bg-input: rgba(9, 12, 21, 0.9);
    --color-bg-dropdown: rgba(9, 14, 26, 0.98);
    --color-bg-navbar: rgba(9, 12, 21, 0.45);
    --color-bg-modal: rgba(13, 17, 23, 0.98);
    --color-bg-offcanvas: rgba(9, 12, 21, 0.98);

    /* ----------------------------------------------------------------------
       Accent Palette
       ---------------------------------------------------------------------- */
    --color-cyan: #00F0FF;
    --color-cyan-rgb: 0, 240, 255;
    --color-cyan-glow: rgba(0, 240, 255, 0.4);
    --color-gold: #FFD700;
    --color-gold-rgb: 255, 215, 0;
    --color-gold-glow: rgba(255, 215, 0, 0.5);
    --color-green: #05D59E;
    --color-green-rgb: 5, 213, 158;
    --color-green-glow: rgba(5, 213, 158, 0.4);
    --color-danger: #FF4757;
    --color-danger-rgb: 255, 71, 87;
    --color-danger-pnl: #FF2A6D;

    /* ----------------------------------------------------------------------
       Typography Colors
       ---------------------------------------------------------------------- */
    --color-text-main: #F1F5F9;
    --color-text-muted: #A0AEC0;
    --color-text-sub: #CBD5E1;
    --color-placeholder: rgba(160, 174, 192, 0.75);

    /* ----------------------------------------------------------------------
       Borders & Outlines
       ---------------------------------------------------------------------- */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-cyan-subtle: rgba(0, 240, 255, 0.25);
    --border-cyan-glow: 0 0 10px var(--color-cyan-glow);
    --border-gold-glow: 0 0 12px var(--color-gold-glow);
    --border-danger-glow: 0 0 12px rgba(255, 71, 87, 0.4);

    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 10px rgba(0, 240, 255, 0.15);
    --card-border: 1px solid var(--color-cyan);
    --ambient-glow: radial-gradient(1250px circle at var(--mouse-x, 50vw) var(--mouse-y, 0vh), rgba(0, 240, 255, 0.22) 0%, rgba(0, 240, 255, 0.08) 45%, transparent 80%);

    /* ----------------------------------------------------------------------
       Mouse Gradient Tracking Position
       ---------------------------------------------------------------------- */
    --mouse-x: 50vw;
    --mouse-y: 0vh;
}

/* ==========================================================================
   Executive Light Theme Tokens
   ========================================================================== */
[data-theme="light"] {
    /* ----------------------------------------------------------------------
       Surfaces & Backgrounds (Refined Executive Light)
       ---------------------------------------------------------------------- */
    --color-bg-base: #F4F6FA;
    --color-bg-card: #FFFFFF;
    --color-bg-subcard: #F8FAFC;
    --color-bg-input: #FFFFFF;
    --color-bg-dropdown: #FFFFFF;
    --color-bg-navbar: rgba(255, 255, 255, 0.48);
    --color-bg-modal: #FFFFFF;
    --color-bg-offcanvas: #FFFFFF;

    /* ----------------------------------------------------------------------
       Accent Palette (High-Contrast Vivid Corporate)
       ---------------------------------------------------------------------- */
    --color-cyan: #0284C7;
    --color-cyan-rgb: 2, 132, 199;
    --color-cyan-glow: rgba(2, 132, 199, 0.25);
    --color-gold: #D97706;
    --color-gold-rgb: 217, 119, 6;
    --color-gold-glow: rgba(217, 119, 6, 0.25);
    --color-green: #059669;
    --color-green-rgb: 5, 150, 105;
    --color-green-glow: rgba(5, 150, 105, 0.20);
    --color-danger: #DC2626;
    --color-danger-rgb: 220, 38, 38;
    --color-danger-pnl: #DC2626;

    /* ----------------------------------------------------------------------
       Typography Colors
       ---------------------------------------------------------------------- */
    --color-text-main: #0F172A;
    --color-text-muted: #64748B;
    --color-text-sub: #475569;
    --color-placeholder: #94A3B8;

    /* ----------------------------------------------------------------------
       Borders & Outlines
       ---------------------------------------------------------------------- */
    --border-subtle: #E2E8F0;
    --border-cyan-subtle: #CBD5E1;
    --border-cyan-glow: 0 2px 8px rgba(2, 132, 199, 0.15);
    --border-gold-glow: 0 2px 8px rgba(217, 119, 6, 0.15);
    --border-danger-glow: 0 2px 8px rgba(220, 38, 38, 0.15);

    --card-shadow: 0 4px 20px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    --card-border: 1px solid #E2E8F0;
    --ambient-glow: radial-gradient(1250px circle at var(--mouse-x, 50vw) var(--mouse-y, 0vh), rgba(2, 132, 199, 0.08) 0%, rgba(2, 132, 199, 0.02) 45%, transparent 80%);
}