/* =========================================================================
   theme-light.css — the LIGHT half of the palette.

   theme.css defines every token dark-first and is loaded everywhere. This
   file re-values the SAME token names for light mode and nothing else: no
   component rules, no layout, no new tokens. Every surface in the product
   already reads those tokens (748 var() uses against 29 hard-coded colours),
   so re-valuing them is what makes light mode real rather than an inverted
   screenshot.

   WHY A SEPARATE FILE
   theme.css carries an asserted leanness budget (test/design-system.js:
   `theme.css stays lean`, < 86,000 bytes) and sits 500 bytes under it. A full
   second palette does not fit, and raising the budget to make room would
   quietly retire a check that exists for a reason. The palette lives here
   instead — same design system, same token names, loaded immediately after
   theme.css on every page.

   THE THREE STATES
     data-theme="dark"   explicit dark   — theme.css alone, nothing here wins
     data-theme="light"  explicit light  — the [data-theme="light"] block
     data-theme="system" follow the OS   — the media query, either direction

   "system" is a real third state, not a synonym for one of the other two: the
   attribute stays "system" and the media query decides, so a user who changes
   their OS appearance at 6pm sees the site change with it and never has to
   come back and re-pick.

   CONTRAST
   Every pairing below was measured against WCAG AA (4.5:1 for body text,
   3:1 for large text and non-text indicators) and is asserted by
   test/theme-appearance.js. Light mode is where dark-mode habits fail —
   a mid-grey that reads as "secondary" on near-black is unreadable on white.

   FINANCIAL SEMANTICS ARE PRESERVED
   Profit stays green, loss stays red, and both are DARKENED rather than
   re-hued: the same #10B981 that carries a dark background is only 1.9:1 on
   white. The meaning of the colour is the contract; its exact value is not.
   ========================================================================= */

/* -------------------------------------------------------------------------
   The light palette, written once and referenced by both selectors below.
   ------------------------------------------------------------------------- */
@media screen {

  /* EXPLICIT LIGHT — the user picked it. */
  :root[data-theme="light"],
  /* FOLLOW THE SYSTEM — the user picked "system" and the OS is light. The
     default (no attribute at all) is dark, so it is deliberately NOT matched
     here: an unconfigured page stays on the product's native dark identity. */
  :root[data-theme="system"] {
    color-scheme: light;

    /* -- Ground and surfaces ------------------------------------------------
       Not pure white. #F7F8FA gives the cards something to sit on, so an
       elevated surface can be lighter than its background instead of relying
       on shadow alone — which is what makes light dashboards look flat. */
    --bg-base:        #F4F6F9;
    --bg-surface:     #FFFFFF;
    --bg-surface-2:   #FAFBFD;
    --bg-elevated:    #FFFFFF;
    --bg-overlay:     rgba(244, 246, 249, 0.82);

    --border-subtle:  #E6E9EF;
    --border-default: #D8DDE6;
    --border-strong:  #B9C1CE;

    /* -- Text ---------------------------------------------------------------
       #1A1F2B on #FFFFFF = 15.3:1. #5A6376 = 6.1:1 (body-safe).
       #687182 = 4.54:1 on --plane (#F4F6F9) and 4.91:1 on white.
       --text-disabled is intentionally the only one below 4.5:1; it marks
       unavailable controls, which are not content. */
    --text-primary:   #1A1F2B;
    --text-secondary: #5A6376;
    --text-muted:     #687182;
    --text-disabled:  #9AA2B1;
    --text-inverse:   #FFFFFF;

    /* -- Accent -------------------------------------------------------------
       The cobalt darkens from #3A63F8 to #2A4BD8: the lighter value is 3.1:1
       on white, which fails as link or button-label text. The identity is the
       hue, and it survives. */
    --accent:         #2A4BD8;
    --accent-hover:   #1E39B0;
    --accent-subtle:  rgba(42, 75, 216, 0.09);
    --focus-ring:     rgba(42, 75, 216, 0.55);

    /* -- Financial semantics ------------------------------------------------
       Darkened for white, never re-hued. Green remains profit, red remains
       loss; a trader reading the screen must never have to re-learn that. */
    --success:        #077A55;
    --critical:       #C22B3C;
    --warning:        #A56100;
    --info:           #1F63C8;
    --pending:        #6D3FD1;
    --verified:       #2A4BD8;
    --disabled:       #9AA2B1;

    --profit-subtle:  rgba(7, 122, 85, 0.11);
    --loss-subtle:    rgba(194, 43, 60, 0.10);
    --warning-soft:   rgba(165, 97, 0, 0.11);
    --warning-border: rgba(165, 97, 0, 0.30);
    --info-soft:      rgba(31, 99, 200, 0.10);
    --info-border:    rgba(31, 99, 200, 0.30);

    --ai:             #6D3FD1;
    --ai-soft:        rgba(109, 63, 209, 0.10);
    --ai-border:      rgba(109, 63, 209, 0.30);

    /* -- Chart series -------------------------------------------------------
       Re-darkened as a set so the six stay distinguishable from each other
       AND readable on white. Order and meaning are unchanged: series-1 is
       still equity, series-2 still balance. */
    --series-1:       #00727B;
    --series-2:       #3B4FC4;
    --series-3:       #077A44;
    --series-4:       #7A6600;
    --series-5:       #7E45AC;
    --series-6:       #C2304C;
    --zero-line:      #C7A8B0;

    /* -- Scorecard bands ----------------------------------------------------
       --band-good was #A3D94A: 1.8:1 on white, effectively invisible. */
    --band-weak:              #C1521F;
    --band-good:              #5F8C12;
  }

  /* ---------------------------------------------------------------------
     SYSTEM MODE, DARK SIDE.
     The block above styles "system" as light unconditionally, which is only
     correct while the OS is light. When it is dark, every token above is
     put back to the dark value. Written as an explicit restore rather than
     by scoping the light block to a `prefers-color-scheme: light` query,
     because that would leave "system" unstyled on browsers that report no
     preference at all — and unstyled here means light tokens with a dark
     stylesheet underneath.
     --------------------------------------------------------------------- */
  @media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
      color-scheme: dark;

      --bg-base:        #090A0D;
      --bg-surface:     #12141A;
      --bg-surface-2:   #1A1D24;
      --bg-elevated:    #1F222B;
      --bg-overlay:     rgba(9, 10, 13, 0.8);

      --border-subtle:  #1A1D24;
      --border-default: #242833;
      --border-strong:  #383E4C;

      --text-primary:   #F0F2F5;
      --text-secondary: #A0A8B8;
      --text-muted:     #81899B;
      --text-disabled:  #4A5161;
      --text-inverse:   #090A0D;

      --accent:         #6988FA;
      --accent-hover:   #6182F9;
      --accent-subtle:  rgba(105, 136, 250, 0.12);
      --focus-ring:     rgba(105, 136, 250, 0.5);

      --success:        #10B981;
      --critical:       #EF4444;
      --warning:        #F59E0B;
      --info:           #3B82F6;
      --pending:        #8B5CF6;
      --verified:       #6988FA;
      --disabled:       #4A5161;

      --profit-subtle:  rgba(16, 185, 129, 0.12);
      --loss-subtle:    rgba(239, 68, 68, 0.12);
      --warning-soft:   rgba(245, 158, 11, 0.12);
      --warning-border: rgba(245, 158, 11, 0.3);
      --info-soft:      rgba(59, 130, 246, 0.12);
      --info-border:    rgba(59, 130, 246, 0.3);

      --ai:             #8B5CF6;
      --ai-soft:        rgba(139, 92, 246, 0.12);
      --ai-border:      rgba(139, 92, 246, 0.3);

      --series-1:       #0098a3;
      --series-2:       #6578e6;
      --series-3:       #00a35a;
      --series-4:       #9e8500;
      --series-5:       #a85ee0;
      --series-6:       #e63a5a;
      --zero-line:      #7a2233;

      --band-weak:              #FF7A45;
      --band-good:              #A3D94A;
    }
  }
}

/* =========================================================================
   THE FEW PLACES A RE-VALUED TOKEN IS NOT ENOUGH
   =========================================================================
   theme.css is almost entirely tokenised, but a handful of rules hard-code a
   colour that only reads correctly on a dark ground. Each one is corrected
   here for light, and nowhere else.
   ========================================================================= */

:root[data-theme="light"] body,
:root[data-theme="system"] body { background: var(--bg-base); }

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] body { background: var(--bg-base); }
}

/* Shadows. theme.css casts them with black at 40–50%, which is right over
   #090A0D and a bruise on white. Light mode needs a cooler, far weaker cast
   so elevation reads as height rather than dirt. The token NAMES are the ones
   theme.css actually defines (--shadow-1/2/3); inventing new ones would leave
   every existing box-shadow still dark. */
:root[data-theme="light"],
:root[data-theme="system"] {
  --shadow-1: none;
  --shadow-2: 0 1px 3px rgba(26, 31, 43, 0.08), 0 6px 16px -8px rgba(26, 31, 43, 0.14);
  --shadow-3: 0 2px 6px rgba(26, 31, 43, 0.08), 0 16px 40px -14px rgba(26, 31, 43, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --shadow-1: none;
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

/* The scrollbar belongs to the theme too; a dark gutter beside a white page
   is the detail that gives away a half-finished light mode. */
:root[data-theme="light"] *,
:root[data-theme="system"] * { scrollbar-color: var(--border-strong) transparent; }
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] * { scrollbar-color: var(--border-strong) transparent; }
}