/* ═══════════════════════════════════════════════════════════════════════
   BWT Trader Portal — Design Tokens
   Visual Refresh 2026-06. Dark mode is the primary surface treatment.

   This file is the FOUNDATION layer: it defines tokens only. Components
   consume these in app.css and via --bs-* overrides (added in the card /
   button / badge sweeps). Loaded AFTER bootstrap + DevExpress themes so the
   --bs-* overrides introduced later win the cascade.
   ═══════════════════════════════════════════════════════════════════════ */

:root {

    /* ── Radius ─────────────────────────────────────────────────────────
       sm: badges, pills        md: buttons, inputs, tabs
       lg: cards, panels        xl: modals                              */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* ── Spacing — 8pt scale ───────────────────────────────────────────
       --space-6 is the default card padding.                          */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* ── Elevation — layered (light surfaces) ──────────────────────────
       Two-layer shadows read softer and more modern than a single drop.
       Dark-mode overrides below deepen these for dark backgrounds.     */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 1px rgba(0,0,0,0.03);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);

    /* ── Neutrals — light ──────────────────────────────────────────── */
    --surface-page:    #F7F8FA;
    --surface-card:    #FFFFFF;
    --surface-raised:  #FFFFFF;
    --border-subtle:   #E6E8EC;

    /* ── Status palette ────────────────────────────────────────────────
       For each status: a solid (filled badges / dots), a soft tint
       background, and a foreground for text on the soft tint.
       *-on is the text color to use ON the solid fill.                 */
    --status-success:     #22C55E;
    --status-success-soft: rgba(34,197,94,0.14);
    --status-success-fg:  #15803D;
    --status-success-on:  #FFFFFF;

    --status-warning:     #F59E0B;
    --status-warning-soft: rgba(245,158,11,0.16);
    --status-warning-fg:  #B45309;
    --status-warning-on:  #1A1A1A;

    --status-danger:      #EF4444;
    --status-danger-soft: rgba(239,68,68,0.14);
    --status-danger-fg:   #B91C1C;
    --status-danger-on:   #FFFFFF;

    --status-info:        #3B82F6;
    --status-info-soft:   rgba(59,130,246,0.14);
    --status-info-fg:     #1D4ED8;
    --status-info-on:     #FFFFFF;

    --status-neutral:     #64748B;
    --status-neutral-soft: rgba(100,116,139,0.14);
    --status-neutral-fg:  #475569;
    --status-neutral-on:  #FFFFFF;
}

/* ── Neutrals + elevation — dark (PRIMARY) ─────────────────────────────
   Dark is the directional reference. Surfaces use the slate ramp; shadows
   deepen because soft light-mode shadows vanish on dark backgrounds.    */
[data-bs-theme="dark"] {
    --surface-page:    #0F172A;
    --surface-card:    #1E293B;
    --surface-raised:  #273449;
    --border-subtle:   #334155;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 1px rgba(0,0,0,0.24);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.38), 0 1px 3px rgba(0,0,0,0.30);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.50), 0 4px 8px rgba(0,0,0,0.36);

    /* Soft tints read brighter on dark; lift the foregrounds for contrast */
    --status-success-soft: rgba(34,197,94,0.18);
    --status-success-fg:  #4ADE80;
    --status-warning-soft: rgba(245,158,11,0.18);
    --status-warning-fg:  #FBBF24;
    --status-danger-soft: rgba(239,68,68,0.18);
    --status-danger-fg:   #F87171;
    --status-info-soft:   rgba(59,130,246,0.18);
    --status-info-fg:     #60A5FA;
    --status-neutral-soft: rgba(148,163,184,0.16);
    --status-neutral-fg:  #94A3B8;
}

/* ═══════════════════════════════════════════════════════════════════════
   Bootstrap variable bridge — CARDS + ELEVATION   (Step 3: card sweep)
   Maps the framework's card + shadow variables onto the tokens above, so
   every Bootstrap .card — KPI tiles, Live Command Center strategy cards,
   University course cards, right-rail panels (Markets / Eco News / Today's
   Events) — picks up the new radius, elevation and padding with NO markup
   changes. The --shadow-* tokens are already theme-aware, so one :root
   mapping covers both light and dark.

   NOTE: in this portal `.shadow-sm` is the conventional card-elevation
   utility (used on KPI tiles, panels and strategy cards), so it is
   intentionally mapped to the medium elevation token for a modern lift.
   ═══════════════════════════════════════════════════════════════════════ */
/* IMPORTANT: Bootstrap declares component variables LOCALLY on the component
   (e.g. `.card { --bs-card-border-radius: var(--bs-border-radius) }`), so a
   :root override is shadowed and has no effect. Component vars must therefore
   be set on the component selector itself — tokens.css loads after bootstrap,
   so an equal-specificity `.card` rule here wins the cascade. */
.card {
    --bs-card-border-radius:       var(--radius-lg);
    --bs-card-inner-border-radius: var(--radius-lg);
    --bs-card-spacer-y:            var(--space-6);
    --bs-card-spacer-x:            var(--space-6);
    --bs-card-cap-padding-y:       var(--space-3);
    --bs-card-cap-padding-x:       var(--space-6);
    --bs-card-box-shadow:          var(--shadow-md);
    box-shadow:                    var(--shadow-md);
}

/* Elevation UTILITIES (.shadow-sm / .shadow / .shadow-lg) read these global
   :root vars — overriding at :root is correct for them. In this portal
   `.shadow-sm` is the conventional card-elevation utility, so it maps up to
   the medium token. */
:root {
    --bs-box-shadow-sm: var(--shadow-md);
    --bs-box-shadow:    var(--shadow-md);
    --bs-box-shadow-lg: var(--shadow-lg);
}

/* ═══════════════════════════════════════════════════════════════════════
   Bootstrap variable bridge — BUTTONS   (Step 4: button sweep)
   Button vars are component-local on .btn / .btn-sm, so they are set on the
   component selectors (same lesson as cards). Standard buttons get radius-md
   and ~37px height (padding 10px 16px per spec); .btn-sm keeps compact
   padding for the dense Live Command Center control grids but shares the
   radius-md corner so the shape vocabulary stays consistent.
   ═══════════════════════════════════════════════════════════════════════ */
.btn {
    --bs-btn-border-radius: var(--radius-md);
    --bs-btn-padding-y: 8px;   /* ~39px height with BS 1.5 line-height (spec target 36-40) */
    --bs-btn-padding-x: 16px;
}
.btn-lg { --bs-btn-border-radius: var(--radius-md); }
.btn-sm {
    --bs-btn-border-radius: var(--radius-md);
    --bs-btn-padding-y: 5px;
    --bs-btn-padding-x: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Bootstrap variable bridge — BADGES   (Step 5: badge sweep)
   One shape for every Bootstrap .badge — Free / Owned / Locked, Live /
   Stale / Playback, Long / Short, Auto / Manual, the eco-impact High / Med /
   Low labels and the counter chips (.badge bg-secondary). Vars are local to
   .badge, so they're set on the selector. Status colors keep coming from the
   semantic bg-* / eco-impact-* classes (an existing coherent palette).
   ═══════════════════════════════════════════════════════════════════════ */
.badge {
    --bs-badge-padding-x: 8px;
    --bs-badge-padding-y: 2px;
    --bs-badge-font-size: 11px;
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: var(--radius-sm);
}