/* =============================================================================
   VTrader Theme Tokens
   -----------------------------------------------------------------------------
   This file is the single source of truth for semantic theme tokens used by the
   VTrader Web Frontend. It declares ~130 CSS custom properties grouped into:

     1. :root             — theme-agnostic tokens + global defaults (dark)
     2. body.theme-dark   — explicit dark overrides (same as :root defaults)
     3. body.theme-light  — light theme overrides

   Sub-sections inside each block (Brand, Backgrounds, Borders, Text, Sides,
   Status, Groups, Toast, Typography, Shadows, Misc) mirror the Figma taxonomy.

   Figma source:
     https://www.figma.com/file/<vtrader-theme-frame>  (replace with project link)

   -----------------------------------------------------------------------------
   Whitelabelling
   -----------------------------------------------------------------------------
   To rebrand VTrader for a partner, override the tokens below by loading a
   downstream stylesheet AFTER this file. The most impactful tokens to override
   are in the Brand and Status sections. Example:

       body.theme-dark  { --color-primary: #FF6A00; --color-primary-hover: #FF8533; }
       body.theme-light { --color-primary: #FF6A00; --color-primary-hover: #E55C00; }

   Do NOT edit this file directly for white-label work — keep partner overrides
   in a separate stylesheet so future theme upgrades apply cleanly.

   -----------------------------------------------------------------------------
   Notes
   -----------------------------------------------------------------------------
   - Comments tagged "verify with Figma" mark hex values where the legacy Sass
     inventory disagreed with the Figma spec — Figma was chosen.
   - Tokens in the "Figma canonical" sections are the curated design system —
     whitelabel partners should override these.
   - Tokens in the "Non-Figma legacy" section (Display sizes, Shadows /
     alpha tints, Misc / specialty) carry values that don't map cleanly to the
     Figma scale. Override them only when the partner brand requires it.
   - Misc / specialty tokens carry their original Sass variable name in the
     comment to make grep-based audits straightforward.
   ============================================================================= */

:root {
  /* ============ BRAND ============ */
  --color-primary: var(--primary--electric-royal--300, #009ac7);
  --color-primary-hover: #00a3ce;
  --color-primary-soft: #b2e7f5;
  --color-primary-bright: #10b8ea; /* Figma: Primary/500 */
  --color-primary-400: #37cdf9; /* Figma: Primary/400 — MDA edit-document link */
  --icon-primary: var(
    --color-primary
  ); /* monochrome-icon fill; derived so it rebrands */
 
  --add-account-link-color: var(--primary--electric-royal--500, #009ac7);

  /* ============ RADIUS ============ */
  --radius-widget: var(--border-radius-lg, 4px);
  --radius-login-button: var(
    --border-radius-lg,
    4px
  ); /* login / Sign-In button */
  --radius-login-input: var(
    --border-radius-lg,
    4px
  ); /* auth-screen input fields */
  --radius-button: var(--border-radius-lg, 0); /* all app buttons */
  --radius-input: var(--border-radius-lg, 0); /* text boxes + dropdowns */

  /* ============ BACKGROUNDS (dark defaults) ============ */
  --bg-app: #131313;
  --bg-navigation: #0d0d0d;
  --bg-navbar: #262626;
  --bg-card: #404040;
  --bg-widget: #1d1d1d;
  --bg-widget-topbar: #363636;
  --bg-widget-border: #4a4a4a;
  --bg-tab: #201f20;
  --bg-tab-active: #121212;
  --bg-input: #171717;
  --bg-input-disabled: #282828;
  --bg-popup: #1d1d1d;
  --bg-tooltip: #4d4d4d;
  --bg-row-hover: #4d4d4d;
  --bg-row-odd: rgba(132, 132, 132, 0.08);
  --bg-overlay: rgba(20, 20, 20, 0.9);
  --bg-dropdown: #171717;
  --bg-context-menu: #38373c;
  --bg-settings-field: #171717;
  --bg-chart-surface: #1c2a35; /* ChartIQ .ciq-night plot area — chart loading overlay must match it */

  /* ============ BORDERS (dark defaults) ============ */
  --border-input: #a2a2a2;
  --border-widget: #131320;
  --border-focus: var(
    --color-primary
  ); /* was #689ffb (blue) — brand focus/hover/selection borders */
  --border-stroke: #689ffb; /* Figma badge/focusborder — selected format button border */
  --border-divider: #3a3a3a;
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-popup: #363636;
  --border-section: rgba(0, 154, 199, 0.25);
  --border-notification-divider: rgba(255, 255, 255, 0.5);

  /* ============ TEXT (dark defaults) ============ */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-headings: #f3f4f6;
  --text-body: #e5e5e5;
  --text-tertiary: #a2a2a2;
  --text-disabled: rgba(255, 255, 255, 0.5);
  --text-on-button: #ffffff;
  --text-on-primary: #000000; /* text on --color-primary buttons (dark theme) */
  --text-symbol: #ffa154;
  --text-link: var(--primary--electric-royal--500, #326bff);
  --status-text-primary: var(
    --primary--electric-royal--500,
    #009ac7
  ); /* Figma: status/text-primary — GATO #326BFF (electric-royal-500); vTrader falls back to #009AC7 */
  --text-link-strong: #1692fb; /* dark falls back to --text-link; light gets navy #033459 */
  --color-buy-close: #1692fb; /* buy-to-close + blue UI accents (the classic link blue) */
  --text-account: #53b1fd; /* Figma: Blue/400 / text/body-secondary / table/row/text-secondary */

  /* ============ SIDES (theme-agnostic) ============ */
  --side-buy-text: #17cb49;
  --side-buy-bg: #03a66d;
  --side-sell-text: #f74141;
  --side-sell-bg: #f74141;
  --side-short: #e3a52c;
  --side-flat: #a7a7a7;

  /* ============ STATUS (theme-agnostic) ============ */
  --status-success: #039855;
  --status-warning: #e1a42c;
  --status-error: #d92d20;
  --status-error-strong: #ba270f; /* strong variant — $danger--strong, $darkRed1, $red-700 */
  --status-cancel: #cf304a;
  --status-reject: #ff0c0c;
  --status-pending: #f0ae2e;

  /* ============ PORTFOLIO GROUPS (theme-agnostic, 8 swatches — Figma: Default-Groups/g1..g8) ============ */
  --group-1: #f57622; /* Figma g1 */
  --group-2: #4b40f7; /* Figma g2 */
  --group-3: #237dd8; /* Figma g3 */
  --group-4: #fba12c; /* Figma g4 */
  --group-5: #38a055; /* Figma g5 */
  --group-6: #80b665; /* Figma g6 */
  --group-7: #b867fa; /* Figma g7 */
  --group-8: #facf36; /* Figma g8 */

  /* ============ TOAST (theme-agnostic — Figma: Default-Toast/*) ============ */
  --toast-info-bg: #b2e7f5;
  --toast-info-fg: #00a3ce;
  --toast-success-bg: #b5f9c4;
  --toast-error-bg: #f74141;
  --toast-error-fg: #ffb7b7;
  --toast-warning-bg: #fae7c7;
  --toast-warning-fg: #ca7f00;

  /* ============ SCROLLBAR (theme-agnostic defaults; dark) ============ */
  --scrollbar-thumb: rgba(255, 255, 255, 0.3);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.5);
  --scrollbar-track: #1d1d1d;

  /* ============ TYPOGRAPHY (theme-agnostic) ============ */
  --font-family-base: var(--typography-font-family-fontfamily, 'Inter');

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Figma sizes (B4=10, B3/H5/H6=12, B2/H4=14, B1/H3=16, H2=22, H1=26) */
  --font-size-xs: 10px; /* Figma B4 */
  --font-size-sm: 12px; /* Figma B3 / H5 / H6 */
  --font-size-md: 14px; /* Figma B2 / H4 */
  --font-size-lg: 16px; /* Figma B1 / H3 / IBM Plex Paragraph */
  --font-size-2xl: 22px; /* Figma H2 */
  --font-size-3xl: 26px; /* Figma H1 */

  /* =============================================================================
     NON-FIGMA LEGACY: Display font sizes
     -----------------------------------------------------------------------------
     Large display sizes that fall outside Figma's 10-26px scale. Used by login
     hero text, error boundary headers, panel loaders. Token names encode the
     px value so it's obvious at the call site.
     ============================================================================= */
  --font-size-display-30: 30px; /* dashboard h2 */
  --font-size-display-31: 31px; /* login subBackgroundTextHeading (responsive) */
  --font-size-display-32: 32px; /* ErrorBoundary errorTitle */
  --font-size-display-36: 36px; /* ErrorBoundary productionTitle */
  --font-size-display-40: 40px; /* login backgroundTextHeading, main default-board-add-icon */
  --font-size-display-48: 48px; /* login subBackgroundTextHeading */
  --font-size-display-50: 50px; /* main panel-render-loader */
  --font-size-display-64: 64px; /* ErrorBoundary errorIcon */

  /* Rem-based font sizes (scale with user's browser font size) */
  --font-size-sm-rem: 0.8rem; /* orderBlotter columnHeader, fundamental */
  --font-size-base-rem: 1rem; /* watchList manage-Watchlist-Title, add-new-tab */
  --font-size-lg-rem: 1.5rem; /* dark historicalOrderView pagination ellipsis */

  /* ============ SHADOWS (Figma: Shadow/lg, Switch shadows) ============ */
  --shadow-default: 0 4px 6px -2px rgba(16, 24, 40, 0.08),
    0 12px 16px -4px rgba(16, 24, 40, 0.14); /* Figma: Shadow/lg */
  --shadow-elevated: 0 5px 14px 0 rgba(0, 0, 0, 0.25); /* Figma: options contract floating header */
  --shadow-toast: 0 4px 6px -2px rgba(16, 24, 40, 0.08),
    0 12px 16px -4px rgba(16, 24, 40, 0.14); /* same — Figma doesn't differentiate */
  --shadow-switch-in: inset 0 6px 8px 3px rgba(0, 0, 0, 0.1); /* Figma: Switch - in shadow */
  --shadow-switch-out: -2px 1px 6px 0 rgba(0, 0, 0, 0.25); /* Figma: Switch-out shadow */

  /* ============ SPACING (Figma: Spacing/*) ============ */
  --spacing-xxxs: 2px;
  --spacing-xs: 6px;
  --spacing-md: 10px;
  --spacing-lg: 12px;
  --spacing-xxxl: 32px;

  /* =============================================================================
     NON-FIGMA LEGACY: Shadow / alpha tints
     -----------------------------------------------------------------------------
     Translucent values used across box-shadows, hover tints, and brand-with-alpha
     accents. Grouped by base color to keep maintenance simple.
     ============================================================================= */

  /* Translucent black — box shadows and dim overlays */
  --shadow-black-a20: rgba(
    0,
    0,
    0,
    0.2
  ); /* dashboard circleBox, ErrorBoundary button hover, light MDA popup, light/_marketDataAgreementPopup */
  --shadow-black-a25: rgba(
    0,
    0,
    0,
    0.25
  ); /* login btnLogin, marketDataAgreementPopup container */
  --shadow-black-a19: rgba(
    0,
    0,
    0,
    0.19
  ); /* portfolioSummary popup-item-row hover */

  /* Primary cyan (#009ac7) with alpha — used in layout selection states and dropdowns */
  --color-primary-a06: rgba(
    0,
    154,
    199,
    0.06
  ); /* dark/light layouts six-three chart-only-section bg */
  --color-primary-a08: rgba(
    0,
    154,
    199,
    0.08
  ); /* light workspace-dropdown add-button hover */
  --color-primary-a10: rgba(
    0,
    154,
    199,
    0.1
  ); /* dark layouts selected layout-button, dark workspace-dropdown */
  --color-primary-a30: color-mix(
    in srgb,
    var(--color-primary) 30%,
    transparent
  ); /* option chain / blotter merged (ATM) row band — derived so it rebrands */
  --color-primary-a50: rgba(
    0,
    154,
    199,
    0.5
  ); /* dark/light layouts six-three border */

  /* Sister cyan (#0098c7) with alpha — option drag handle */
  --misc-drag-cyan-a40: rgba(
    0,
    152,
    199,
    0.4
  ); /* dark option-drag-handle dragging shadow */
  --misc-drag-cyan-a80: rgba(
    0,
    152,
    199,
    0.8
  ); /* dark/light option-drag-handle dragging bg */

  /* Buy/sell side colors with alpha — bid/ask tinted backgrounds */
  --side-buy-a28: rgba(
    3,
    166,
    109,
    0.28
  ); /* watchList, orderEntry, optionTicketVertical, optionOrderEntry */
  --side-buy-a35: rgba(
    3,
    166,
    109,
    0.35
  ); /* popUp placeOrderBgcolor disabled */
  --side-sell-a28: rgba(
    207,
    48,
    74,
    0.28
  ); /* watchList, orderEntry, optionTicketVertical, optionOrderEntry */

  /* Grey alpha tints */
  --misc-grey153-a90: rgba(
    153,
    153,
    153,
    0.9
  ); /* option-drag-handle hover bg */
  --misc-grey151-a50: rgba(
    151,
    162,
    187,
    0.5
  ); /* light common profileContainer hover */
  --misc-grey183-a10: rgba(183, 183, 183, 0.1); /* dropzone bg */
  --misc-grey211-a50: rgba(211, 211, 211, 0.5); /* dashboard widgetBar bg */

  /* One-off rgba accents */
  --misc-orange-warning-a10: rgba(
    255,
    124,
    0,
    0.1
  ); /* light errorBoundary devBanner bg */
  --misc-orange-warning-a20: rgba(
    255,
    124,
    0,
    0.2
  ); /* dark errorBoundary devBanner bg */
  --misc-orange-warning: rgba(
    255,
    124,
    0,
    1
  ); /* errorBoundary devBanner border (dark + light) */
  --misc-error-row-tint: rgba(
    240,
    68,
    56,
    0.1
  ); /* light errorBoundary errorMessage bg */
  --misc-focus-blue-glow: rgba(104, 143, 251, 0.5); /* alerts box-shadow */
  --misc-dim-navy: rgba(
    16,
    24,
    40,
    0.75
  ); /* light popUp confirmation-list-view text */
  --misc-info-blue-tint: rgba(0, 123, 255, 0.1); /* main enlarged-cell bg */
  --misc-cyan-card-footer: rgba(
    13,
    126,
    166,
    0.31
  ); /* main default-board-card-footer bg */
  --misc-pagination-blue-bg: rgba(
    33,
    150,
    243,
    0.1
  ); /* light orderBlotterPagination new-orders bg */
  --misc-pagination-blue-fg: rgba(
    25,
    118,
    210,
    1
  ); /* light orderBlotterPagination new-orders label/icon */

  /* ============ MISC / SPECIALTY ============ */
  /* Specialty palette colors with no clean semantic home. Keep these here so
     find-replace can target them without inlining hex at use sites. */
  --misc-font-family-mono: 'Courier New', monospace; /* $font-family-mono — code / numeric displays */

  --misc-alert-row-tint: rgba(
    132,
    132,
    132,
    0.15
  ); /* rgba($grey-4, .15) — 6 uses in dark/_alerts.scss */
  --misc-alert-gradient-cream: rgba(
    255,
    252,
    205,
    0.5
  ); /* $cream-255252-a50 — alert highlight gradient stop */
  --misc-alert-gradient-gold-0: rgba(
    255,
    215,
    0,
    0
  ); /* $gold-255215-a00 — alert highlight gradient stop */
  --misc-alert-gradient-gold-70: rgba(
    255,
    215,
    0,
    0.7
  ); /* $gold-255215-a70 — alert highlight gradient stop */
  --misc-alert-gradient-yellow-0: rgba(
    255,
    240,
    0,
    0
  ); /* $yellow-255240-a00 — alert gradient stop */
  --misc-alert-success-tint: rgba(
    26,
    217,
    80,
    0.1
  ); /* $green-rgb26-a10 — alert success bg tint */
  --misc-alert-success-tint-bright: rgba(
    74,
    222,
    128,
    0.16
  ); /* $green-74-a16 — alert bg tint */
  --misc-alert-error-tint: rgba(
    248,
    113,
    113,
    0.4
  ); /* $red-248-a40 — alert bg tint */

  --misc-color-sub-caution: #74cfe9; /* $sub-caution — caution variant of primary */
  --misc-color-blue-link-alt: #03a9f4; /* $blue-light / $blue2 / $orderBlotterFilterColor — link-ish cyan */
  --misc-color-yellow-gold: #ffd700; /* $yellow-gold — used in alerts/notifications */
  --misc-color-yellow-tint: #fae7c7; /* $yellow-tint / $lightGrey10 — alert info bg */
  --misc-color-light-green: #b5f9c4; /* $light-green / $green-light-bg — chart positive bg */
  --misc-color-green-chart: #4ade80; /* $green-4ade — chart accent */
  --misc-color-sky-blue: rgba(
    7,
    64,
    80,
    0.5
  ); /* $skyBlue / $sky-blue (#07405080) — chart accent */
  --misc-color-light-sky-blue: rgba(
    143,
    190,
    219,
    0.31
  ); /* $lightSkyBlue (#8fbedb4f) — chart accent */
  --misc-color-grey-blue: #161e23; /* $grey-blue-161e — single dark near-black-blue accent */

  --misc-tab-bg-legacy: rgba(
    185,
    190,
    205,
    0.85
  ); /* $lightGrey / $tabBackgroundColor (#b9becdd9) — legacy tabs */
  --misc-faint-highlight: rgba(
    254,
    254,
    254,
    0.21
  ); /* $lightGrey5 (#fefefe36) — faint highlight overlay */
  --misc-border-pop-button: rgba(
    255,
    255,
    255,
    0.27
  ); /* $borderColorPopButton (#ffffff45) — popup button border */
  --misc-row-selected: rgba(
    25,
    118,
    210,
    0.5
  ); /* $selected-row-blue / $selected-row-in-grid — MUI row selection */

  --misc-svg-filter-on-dark-bg: invert(88%) sepia(100%) saturate(8%)
    hue-rotate(183deg) brightness(106%) contrast(101%); /* $svg-filter-on-dark-bg / $filter-svg-on-dark-bg — light-only CSS filter */
  --misc-icon-filter: brightness(0) saturate(100%) invert(0%) sepia(0%)
    saturate(0%) hue-rotate(308deg) brightness(99%) contrast(101%); /* $icon-filter / $filter-icon-to-black — light-only CSS filter */

  --misc-bg-new-order-badge: #0c556a; /* $bg-new-order-badge — dark-only; navy-cyan badge bg */

  /* One-off hex colors — kept in themes.css for whitelabel discoverability */
  --misc-bg-panel-alt: #393e4c; /* panel tabItem bg — dark panel surface */
  --misc-bg-panel-alt-hover: #5b5c61; /* panel TabRenderItem.add-board hover */
  --misc-bg-tooltip-dark-alt: #414652; /* dark/light dxOverrides order-entry-company-name-tooltip */
  --misc-text-disabled-grey-a44: #cccccc70; /* dark dashboard disabled select text-fill */
  --misc-text-placeholder-grey-a58: #cccccc95; /* dashboard placeholder color */
  --misc-bg-nav-hover-legacy: #97a2bb96; /* core dropDown #primary_nav_wrap hover */
  --misc-bg-board-edit-cyan: #5ac1e5bf; /* component editBoard input bg */
  --misc-color-red-soft: #f87171; /* main CIS-red text */
  --misc-bg-check-tick: #adadad45; /* login checkTick bg */
  --misc-bg-onboarding-dot-inactive: #585c65; /* login dark onboarding dot inactive */
  --misc-color-amber-warning: #f79009; /* marketDataAgreementPopup note */
  --misc-color-slate-text: #2c3e50; /* watchList confirmation-tab-item */
  --misc-bg-warning-soft: #fff3cd; /* watchList confirmation-warning bg (light) */
  --misc-border-warning-soft: #ffeaa7; /* watchList confirmation-warning border (light) */
  --misc-text-warning-deep: #856404; /* watchList confirmation-warning text (light) */
  --misc-text-slate-light: #e2e8f0; /* dark watchList confirmation popup text */
  --misc-text-slate-light-2: #cbd5e0; /* dark watchList confirmation-message */
  --misc-bg-warning-deep: #744210; /* dark watchList confirmation-warning bg */
  --misc-border-warning-deep: #975a16; /* dark watchList confirmation-warning border */
  --misc-text-warning-cream: #fef5e7; /* dark watchList confirmation-warning text */
  --misc-bg-slate-deep: #2d3748; /* dark watchList confirmation cancel hover bg */
  --misc-border-slate-deep: #4a5568; /* dark watchList confirmation cancel hover border */

  /* Figma Gray scale (theme-agnostic) — for theme-neutral surfaces like gradients */
  --color-gray-900: #101828; /* Figma Gray/900 — walkthrough modal gradient start */
  --color-gray-700: #344054; /* Figma Gray/700 — options contract Last/Change labels */
  --color-gray-600: #475467; /* Figma Gray/600 — walkthrough modal gradient end */
  --color-gray-500: #667085; /* Figma Gray/500 — options contract pill bg */
  --color-gray-400: #98a2b3; /* Figma Gray/400 — light confirmation popup border */
  --color-gray-200: #eaecf0; /* Figma Gray/200 — light confirmation popup bg */
  --color-gray-100: #f2f4f7; /* Figma Gray/100 — light add-widget dropdown body */
  --color-gray-50: #f9fafb; /* Figma Gray/50 — light auth form panel ($whiteBackground) */
  --color-gray-25: #fcfcfd; /* Figma Gray/25 — options contract pill text */
  --color-base-white: #ffffff; /* Figma Base/White — light chart plot area */

  /* Figma Success scale (theme-agnostic palette) */
  --color-success-800: #05603a; /* Figma Success/800 — options contract CALL text */
  --color-success-700: #027a48; /* Figma Success/700 — light watchlist up-tick value text */
  --color-success-500: #12b76a; /* Figma Success/500 — light buy/sell/send button bg */

  /* Figma Error scale (theme-agnostic palette) */
  --color-error-600: #d92d20; /* Figma Error/600 — light watchlist down-tick value text */

  /* Figma Purple scale (theme-agnostic palette) */
  --color-purple-600: #6938ef; /* Figma Purple/600 — options contract PUT text */

  /* Toast text — toast backgrounds are always light, so text stays dark in both themes */
  --misc-toast-text: #0d0d0d; /* Figma: toast text (vTrader/Dark/TopHeader) — light-bg toasts */

  /* Switch thumb (light theme) — MUI switch disabled thumb in light mode */
  --misc-switch-thumb-light: #c1c1c1; /* SwitchButton light-theme thumb */
  --misc-shadow-switch-thumb: 0 2px 4px 0 rgb(0 35 11 / 20%); /* SwitchButton thumb drop shadow */
}

/* =============================================================================
   DARK THEME (explicit; mirrors :root defaults so a theme toggle can opt-in)
   ============================================================================= */
body.theme-dark,
.theme-dark {
  /* ============ BRAND ============ */
  --color-primary: var(--primary--electric-royal--300, #009ac7);
  --color-primary-hover: #00a3ce;
  --color-primary-soft: #b2e7f5;
  --color-primary-bright: #10b8ea; /* Figma: Primary/500 */
  --color-primary-400: #37cdf9; /* Figma: Primary/400 — MDA edit-document link */
  --icon-primary: var(--color-primary); /* monochrome-icon fill (dark) */
  --color-primary-a30: color-mix(
    in srgb,
    var(--color-primary) 30%,
    transparent
  ); /* merged (ATM) row band — re-derived per theme */

  /* ============ BACKGROUNDS ============ */
  --bg-app: #131313;
  --bg-navigation: #0d0d0d;
  --bg-navbar: #262626;
  --bg-card: #404040;
  --bg-widget: #1d1d1d;
  --bg-widget-topbar: #363636;
  --bg-widget-border: #4a4a4a;
  --bg-tab: #201f20;
  --bg-tab-active: #121212;
  --bg-input:  #171717;
  --bg-input-Alert: #1D1D1D;
  --bg-input-disabled: #282828;
  --bg-popup: #1d1d1d;
  --bg-tooltip: #4d4d4d;
  --bg-row-hover: #4d4d4d;
  --bg-row-odd: rgba(132, 132, 132, 0.08);
  --bg-overlay: rgba(20, 20, 20, 0.9);
  --bg-dropdown: #171717;
  --bg-context-menu: #38373c;
  --bg-settings-field: #171717;
  --bg-chart-surface: #1c2a35; /* ChartIQ .ciq-night plot area — chart loading overlay must match it */

  /* ============ BORDERS ============ */
  --border-input: #a2a2a2;
  --border-widget: #131320;
  --border-focus: var(
    --color-primary
  ); /* was #689ffb (blue) — brand focus/hover/selection borders */
  --border-stroke: #689ffb; /* Figma badge/focusborder — selected format button border */
  --border-divider: #3a3a3a;
  --border-subtle: rgba(255, 255, 255, 0.1);
  --border-popup: #363636;
  --border-section: rgba(0, 154, 199, 0.25);
  /* Divider on always-dark surfaces (e.g. notification popup header) — white 50%. */
  --border-notification-divider: rgba(255, 255, 255, 0.50);

  /* ============ TEXT ============ */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-headings: #f3f4f6;
  --text-body: #e5e5e5;
  --text-tertiary: #a2a2a2;
  --text-disabled: rgba(255, 255, 255, 0.5);
  --text-on-button: #ffffff;
  --text-on-primary: #000000; /* black text on the dark-theme primary button */
  --text-symbol: #ffa154;
  --text-link: var(--primary--electric-royal--500, #326bff);
  --text-link-strong: #1692fb; /* dark uses same as --text-link */
  --color-buy-close: #1692fb; /* buy-to-close + blue UI accents (the classic link blue) */
  --text-account: #53b1fd; /* Figma: Blue/400 */

  /* ============ SIDES ============ */
  --side-buy-text: #17cb49;
  --side-buy-bg: #03a66d;
  --side-sell-text: #f74141;
  --side-sell-bg: #f74141;
  --side-short: #e3a52c;
  --side-flat: #a7a7a7;

  /* ============ STATUS ============ */
  --status-success: #039855;
  --status-warning: #e1a42c;
  --status-error: #d92d20;
  --status-error-strong: #ba270f;
  --status-cancel: #cf304a;
  --status-reject: #ff0c0c;
  --status-pending: #f0ae2e;

  /* ============ GROUPS (Figma: Default-Groups/g1..g8) ============ */
  --group-1: #f57622;
  --group-2: #4b40f7;
  --group-3: #237dd8;
  --group-4: #fba12c;
  --group-5: #38a055;
  --group-6: #80b665;
  --group-7: #b867fa;
  --group-8: #facf36;

  /* ============ TOAST ============ */
  --toast-info-bg: #b2e7f5;
  --toast-info-fg: #00a3ce;
  --toast-success-bg: #b5f9c4;
  --toast-error-bg: #f74141;
  --toast-error-fg: #ffb7b7;
  --toast-warning-bg: #fae7c7;
  --toast-warning-fg: #ca7f00;

  /* ============ SCROLLBAR ============ */
  --scrollbar-thumb: rgba(255, 255, 255, 0.3);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.5);
  --scrollbar-track: #1d1d1d;

  /* ============ SHADOWS ============ */
  --shadow-default: 0 4px 6px -2px rgba(16, 24, 40, 0.08),
    0 12px 16px -4px rgba(16, 24, 40, 0.14);
  --shadow-toast: 0 4px 6px -2px rgba(16, 24, 40, 0.08),
    0 12px 16px -4px rgba(16, 24, 40, 0.14);

  /* ============ MISC ============ */
  --misc-alert-row-tint: rgba(132, 132, 132, 0.15);
}

/* =============================================================================
   LIGHT THEME
   ============================================================================= */
body.theme-light,
.theme-light {
  /* ============ BRAND ============ */
  --color-primary: var(--primary--electric-royal--700--main-, #009ac7);
  --color-primary-hover: #00a3ce;
  --color-primary-soft: #b2e7f5;
  --color-primary-bright: #0ba5ec; /* light-side bright cyan ($blue6) */
  --icon-primary: var(
    --color-primary
  ); /* monochrome-icon fill (light) — set a darker shade here if you want more contrast on white */
  --color-primary-a30: color-mix(
    in srgb,
    var(--color-primary) 30%,
    transparent
  ); /* merged (ATM) row band — re-derived per theme */
  --color-primary-100: #97b6ff;
  /* ============ BACKGROUNDS ============ */
  --bg-app: #f2f4f7; /* verify with Figma — legacy Sass had #dcdcdc; Figma wins */
  --bg-navigation: #ffffff;
  --bg-widget: #f9fafb; /* Figma Gray/50 — light widget/ticket body bg */
  --bg-widget-topbar: #f2f4f7; /* Figma Gray/100 — light widget header bar bg */
  --bg-widget-border: #d0d5dd;
  --bg-tab: #f2f4f7;
  --bg-tab-active: #ffffff;
  --bg-input: #f2f4f7; /* Figma Gray/100 — light input bg */
  --bg-input-disabled: #eaecf0; /* Figma Gray/200 — light disabled/readonly input bg */
  --bg-popup: #ffffff;
  --bg-tooltip: #101828;
  --bg-row-hover: #f2f4f7;
  --bg-row-odd: #f2f2f2;
  --bg-overlay: rgb(168, 168, 168, 0.9);
  --bg-dropdown: #ffffff;
  --bg-context-menu: #ffffff;
  --bg-settings-field: #ffffff;
  --bg-chart-surface: #ffffff; /* matches .theme-light .widget-chart .ciq-chart-area (--color-base-white) */

  /* ============ BORDERS ============ */
  --border-input: #d0d5dd;
  --border-stroke: #689ffb; /* Figma vTrader/Light/stroke — editable input border */
  --border-widget: #1d2939;
  --border-focus: var(
    --color-primary
  ); /* was #689ffb (blue) — brand focus/hover/selection borders */
  --border-divider: #98a2b3;
  --border-subtle: rgba(0, 0, 0, 0.1);
  --border-popup: #ffffff;
  --border-section: rgba(0, 154, 199, 0.25);

  /* ============ TEXT ============ */
  --text-primary: #101828;
  --text-secondary: #667085;
  --text-tertiary: #98a2b3;
  --text-disabled: rgba(0, 0, 0, 0.5);
  --text-on-button: #ffffff;
  --text-on-primary: #ffffff; /* white text on light-theme primary (dark blue) buttons */
  --text-symbol: #ffa154;
  --text-link: var(--primary--electric-royal--500, #326bff);
  --text-link-strong: #033459; /* navy text in light theme — used by popup card descriptions, dx field labels, update-password text */
  --color-buy-close: #237dd8; /* buy-to-close + blue UI accents (the classic link blue) */
  --text-account: #2e90fa; /* light-side account tint ($account-color-popup) */

  /* ============ SIDES ============ */
  --side-buy-text: #039855; /* Figma Success/600 — light buy/positive text */
  --side-buy-bg: #03a66d;
  --side-sell-text: #f04438; /* Figma Error/500 — light sell/negative text */
  --side-sell-bg: #f74141;
  --side-short: #e3a52c;
  --side-flat: #a7a7a7;

  /* ============ STATUS ============ */
  --status-success: #039855;
  --status-warning: #e1a42c;
  --status-error: #d92d20;
  --status-error-strong: #ba270f;
  --status-cancel: #cf304a;
  --status-reject: #ff0c0c;
  --status-pending: #f0ae2e;

  /* ============ GROUPS (Figma: Default-Groups/g1..g8) ============ */
  --group-1: #f57622;
  --group-2: #4b40f7;
  --group-3: #237dd8;
  --group-4: #fba12c;
  --group-5: #38a055;
  --group-6: #80b665;
  --group-7: #b867fa;
  --group-8: #facf36;

  /* ============ TOAST ============ */
  --toast-info-bg: #b2e7f5;
  --toast-info-fg: #00a3ce;
  --toast-success-bg: #b5f9c4;
  --toast-error-bg: #f74141;
  --toast-error-fg: #ffb7b7;
  --toast-warning-bg: #fae7c7;
  --toast-warning-fg: #ca7f00;

  /* ============ SCROLLBAR ============ */
  --scrollbar-thumb: rgba(0, 0, 0, 0.3);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.5);
  --scrollbar-track: #cdcdcd; /* not in Figma; legacy $scrollbar-light-color-token */

  /* ============ SHADOWS ============ */
  --shadow-default: 0 4px 6px -2px rgba(16, 24, 40, 0.08),
    0 12px 16px -4px rgba(16, 24, 40, 0.14);
  --shadow-toast: 0 4px 6px -2px rgba(16, 24, 40, 0.08),
    0 12px 16px -4px rgba(16, 24, 40, 0.14);

  /* ============ MISC ============ */
  --misc-alert-row-tint: rgba(132, 132, 132, 0.15);
}

html body {
  font-family: var(--font-family-base) !important;
}