@charset "UTF-8";
/* Theme System — Dark Mode Only
   Light mode uses original CSS files unchanged.
   Dark mode selectively overrides original colors via tokens. */

/* DARK MODE */
[data-theme="dark"] {
  /* Background Layers */
  --bg-base: #0e1116;
  --bg-elevated: #161a22;
  --bg-card: #222831;
  --bg-overlay: rgba(0, 0, 0, 0.8);
  --bg-form-mode-increase: #16281c;

  /* Text Colors */
  --text-primary: #e6edf3;
  --text-secondary: #9aa4b2;
  --text-secondary-accent: #d4a574;
  --text-muted: #6e7681;
  --text-inverse: #0e1116;

  /* Borders */
  --border-subtle: #30363d;
  --border-strong: #444c56;

  /* Financial & Intent Colors */
  --accent-buy: #3fb950;
  --accent-sell: #f85149;
  --accent-neutral: #79c0ff;
  /* Text drawn ON a filled buy/sell chip. Added 2026-08-27: these are NOT both
     white. modernize.css paints dark .btn-success with color:#0b1220 precisely
     because white on #3fb950 measures ~2.2:1 and fails AA outright, while white
     on the red #f85149 passes. Mirrored here so any component filling a chip with
     --accent-buy/--accent-sell gets the platform's already-checked pairing rather
     than guessing #fff and failing in one theme only. */
  --accent-buy-text: #0b1220;
  --accent-sell-text: #ffffff;

  /* P&L Colors */
  --accent-pnl-pos: #3fb950;
  --accent-pnl-neg: #f85149;
  --accent-pnl-flat: #79c0ff;

  /* Status Colors */
  --status-open: #bc8ef9;
  --status-complete: #3fb950;
  --status-rejected: #f85149;
  --status-cancelled: #8dafcd;
  --status-trigpend: #bc8ef9;

  /* Accent Colors */
  --accent-primary: #58a6ff;
  --accent-info: #79c0ff;
  --accent-warning: #d29922;
  --accent-danger: #f85149;
  --accent-success: #3fb950;

  /* Exchange Colors */
  --exchange-nse: #6366f1;
  --exchange-bse: #a78bfa;
  --exchange-mcx: #fb8500;

  /* Card System */
  --card-radius: 5px;
  --card-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.3);
  --card-bg: #222831;
  --card-border: #30363d;

  /* Dialog scrim. Bootstrap's own .modal-backdrop is a flat black at 50%, which on a dark
     surface leaves too little separation between the dialog and what is behind it — so this
     is darker here and lighter in the light theme, rather than one value for both. */
  --overlay-backdrop: rgba(1, 4, 9, 0.72);

  /* Row & Table */
  --row-hover: rgba(255, 255, 255, 0.04);
  --table-header-bg: #161a22;
  --table-header-text: #e6edf3;

  /* Chrome */
  --navbar-bg: #161a22;
  --navbar-text: #e6edf3;
  --sidebar-bg: #0e1116;
  --sidebar-text: #e6edf3;
  --footer-bg: #0e1116;
  --footer-text: #9aa4b2;

  /* Update Time Badge */
  --bg-update-time: #3d2e4e;
  --text-update-time: #d8b9ff;

  /* Tooltip (sd-tooltip) */
  --tooltip-bg: #2d333b;
  --tooltip-text: #e6edf3;
  --tooltip-border: #444c56;
  --tooltip-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.3);

  /* Static-IP note box + address labels (setting/trading-account-edit) */
  --sd-ipnote-bg: #12202e;
  --sd-ipnote-text: #e6edf3;
  --sd-ipnote-accent: #58a6ff;
}

/* Tooltip (sd-tooltip) — light mode. First light-mode token block in this file
   (everything else here is dark-only, overriding original CSS unchanged in
   light mode); sd-tooltip has no separate "original" stylesheet to fall back
   on, so it needs real tokens on both sides. Scoped with :not([data-theme="dark"])
   rather than a bare :root: a bare :root here has the SAME specificity as
   [data-theme="dark"] above, so on a plain source-order tie the later rule (this
   one) always won and silently discarded the dark block's tokens — dark mode was
   getting the light palette regardless of theme. */
:root:not([data-theme="dark"]) {
  --tooltip-bg: #26292e;
  --tooltip-text: #ffffff;
  --tooltip-border: #26292e;
  --tooltip-shadow: 0 4px 14px rgba(23, 43, 77, 0.18), 0 1px 3px rgba(23, 43, 77, 0.1);

  /* Static-IP note box + address labels (setting/trading-account-edit) */
  --sd-ipnote-bg: #eaf2fd;
  --sd-ipnote-text: #24333f;
  --sd-ipnote-accent: #0b5ca8;
}

/* ============================================================================
   LIGHT-MODE VALUES FOR THE PLATFORM TOKENS — added 2026-08-27 (options adoption pass)

   WHY THIS EXISTS. Everything above the tooltip block is dark-only: the
   [data-theme="dark"] block defines the tokens, the theme-*.css sheets read them
   ONLY inside [data-theme="dark"] rules, and light mode falls back to the original
   style.css. That works for a component that HAS an original stylesheet behind it.
   It fails for a NEW component, which has none — it gets nothing in light mode and
   renders unstyled. sd-tooltip hit this first (block above); the options screen hit
   it second and worked around it privately, with 16 --sd-opt-* tokens of its own.

   Rather than let every new component invent its own light palette, the values are
   promoted here so there is ONE set of names that resolves in BOTH themes.

   🔴 VERIFIED SAFE FOR EVERY EXISTING SCREEN, and this is the load-bearing check:
   no theme-*.css rule reads any of these tokens outside a [data-theme="dark"]
   scope, so in light mode nothing consumes them today. Defining them changes
   nothing that currently renders — it only gives new components something to read.

   🔴 EVERY VALUE BELOW IS SOURCED, NOT INVENTED. The brand set comes from
   modernize.css (the 2026-07-12 surface refresh), which is what actually paints
   the buttons; the greys come from style.css and Bootstrap 4's own scale. Taking
   them from anywhere else is how a second design system starts. In particular
   modernize.css maps success -> "Save / BUY" and danger -> "Delete / SELL", so
   --accent-buy / --accent-sell are aliases of those, NOT independent greens/reds.
   ============================================================================ */
:root:not([data-theme="dark"]) {
  /* Background layers — style.css:7969 (body), Bootstrap .card */
  --bg-base: #f3f3f3;
  --bg-elevated: #eef1f6;      /* derived: one step off --bg-base, for sticky columns */
  --bg-card: #ffffff;

  /* Text — style.css:7972 (body), :12931 (.text-muted), Bootstrap $gray-600 */
  --text-primary: #353c4e;
  --text-secondary: #6c757d;
  --text-muted: #919aa3;
  --text-inverse: #ffffff;

  /* Borders — Bootstrap $border-color / $gray-400 */
  --border-subtle: #dee2e6;
  --border-strong: #ced4da;

  /* Brand + status — modernize.css:118/141/152/163. These are the colours the
     platform's own buttons are painted in; a component that picks its own blue
     is a component that no longer looks like at-web. */
  --accent-primary: #1f56e6;
  --accent-info: #1f56e6;      /* modernize.css maps .btn-info onto the brand */
  --accent-success: #16a34a;
  --accent-danger: #dc2626;
  --accent-warning: #f59e0b;

  /* Trade intent. 🔴 Aliases, deliberately — BUY must be the same green the Save/BUY
     button is painted in and SELL the same red, on every screen. This is the pair a
     user can be WRONG about at the cost of real money. */
  --accent-buy: #16a34a;
  --accent-sell: #dc2626;
  --accent-buy-text: #ffffff;   /* modernize.css:141 — white on #16a34a */
  --accent-sell-text: #ffffff;  /* modernize.css:152 — white on #dc2626 */
  --accent-neutral: #6c757d;

  /* P&L — same green/red as trade intent, for the same reason. */
  --accent-pnl-pos: #16a34a;
  --accent-pnl-neg: #dc2626;
  --accent-pnl-flat: #6c757d;

  /* Dialog scrim — see the dark block. */
  --overlay-backdrop: rgba(23, 43, 77, 0.45);

  /* Row & table */
  --row-hover: rgba(31, 86, 230, 0.06);   /* brand tint, matching --accent-primary */
  --table-header-bg: #f5f7fa;
  --table-header-text: #353c4e;

  /* Card system — style.css:8136 */
  --card-radius: 5px;
}

/* ============================================================================
   DENSITY + TYPE SCALE — theme-independent, so a bare :root.

   Spacing and type do not change with the theme, and both are here rather than in
   a component so the next dense screen does not re-pick its own values. The steps
   are the ones the options cockpit already converged on by hand, not a fresh scale
   imposed on the app: 0.25 / 0.5 / 0.75 / 1 / 1.5rem.

   These are OPT-IN. Nothing that exists today reads them — Bootstrap's own spacing
   still governs every current screen, and this block does not override it.
   ============================================================================ */
:root {
  --sd-space-1: 0.25rem;
  --sd-space-2: 0.5rem;
  --sd-space-3: 0.75rem;
  --sd-space-4: 1rem;
  --sd-space-5: 1.5rem;

  /* Type scale for information-dense screens. Base stays at the body's 0.825em
     (style.css:7970) — these are the steps around it, not a replacement for it. */
  --sd-text-2xs: 0.6875rem;
  --sd-text-xs: 0.75rem;
  --sd-text-sm: 0.8125rem;
  --sd-text-md: 0.875rem;
  --sd-text-lg: 1rem;
}