/* Theme: black-gold (the default) and white-deep-blue.
   ------------------------------------------------------------------------
   Every stylesheet on the desk declares its palette as tokens on a bare :root.
   An attribute selector on the same element outranks all of them, so this one
   block re-colours the whole desk — every module, the landing page, the shell —
   without any of those files knowing a second theme exists.

   The accent token keeps its name: "--gold" becomes deep blue under the light
   theme rather than being renamed, so nothing that reaches for the accent has
   to change.

   The light palette is not "the dark one inverted". It is white and deep blue
   as a pair: paper surfaces stepping from white to a cool blue-grey, navy ink,
   a deep-blue accent, and every glow, gradient and shadow re-expressed as a
   blue tint rather than a black one — the black shades were what made the
   first cut look like a dark theme with the lights on. Contrast measured, not
   eyeballed: ink 17:1, the dimmest ink 4.5:1, the accent 8.7:1, every status
   colour above 4.5:1 on white. */

:root[data-theme="light"]{
  /* surfaces: paper, stepping cooler and deeper into the page */
  --bg:#f3f5fa; --s1:#ffffff; --s2:#eaeef7; --s3:#dde3f0;
  --panel-end:#f7f9fd; --tip-bg:#ffffff; --sheen:rgba(30,64,175,.035);
  --surface-2:rgba(30,64,175,.05); --surface-3:rgba(30,64,175,.08);
  --line:rgba(22,40,90,.10); --line2:rgba(22,40,90,.18); --line-strong:rgba(22,40,90,.26);

  /* ink: navy, never grey-on-white */
  --ink:#0f1a3a; --ink2:#3b4a6e; --ink3:#66728c; --text:var(--ink);

  /* the accent and what sits on it */
  --gold:#1e40af; --gold-dim:rgba(30,64,175,.12); --on-accent:#ffffff; --accent-rgb:30 64 175;

  /* status, tuned for paper */
  --good:#1a7f56; --good-dim:rgba(26,127,86,.12);
  --warn:#a16207; --warn-dim:rgba(161,98,7,.12);
  --bad:#b91c1c; --bad-dim:rgba(185,28,28,.11);
  --teal:#0e7490; --teal-dim:rgba(14,116,144,.12);

  /* depth: shadows are blue, not black — black shadows on white read as dirt */
  --shadow:rgba(22,40,90,.16); --scrim:rgba(15,26,58,.42);
  --hero-top:#e6ebf7; --hero-bot:#f3f5fa;

  /* the landing page's own tokens */
  --l-bg:#f3f5fa; --l-bg-rgb:243 245 250; --l-s1:#ffffff; --l-s2:#eaeef7;
  --l-ink:#0f1a3a; --l-ink-rgb:15 26 58; --l-line-rgb:22 40 90;
  --l-accent:#1e40af; --l-accent-hi:#2451c7; --l-accent-lo:#1e3a8a; --l-accent-rgb:30 64 175;
  --l-good:#1a7f56; --l-good-hi:#15803d; --l-good-rgb:26 127 86;
  --l-bad:#b91c1c; --l-bad-hi:#dc2626; --l-bad-rgb:185 28 28;
  --l-on-accent:#ffffff;

  /* the privacy page's own tokens */
  --pp-bg:#f3f5fa; --pp-surface:#ffffff; --pp-ink:#0f1a3a;
  --pp-ink2:rgba(15,26,58,.74); --pp-ink3:rgba(15,26,58,.52);
  --pp-line:rgba(22,40,90,.12); --pp-gold:#1e40af;

  color-scheme:light;
}

/* Paper wants a little depth of its own, or every card floats on the same
   flat white. A hairline of blue at the top edge of panels, and a soft blue
   drop instead of a black one. */
:root[data-theme="light"] .panel{
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(22,40,90,.06),0 8px 24px -12px rgba(22,40,90,.18)}
:root[data-theme="light"] .hc-pct{text-shadow:none}
:root[data-theme="light"] ::selection{background:var(--gold);color:#ffffff}
/* Gold-on-dark hero pills and badges become white-on-blue. */
:root[data-theme="light"] .ho-live,
:root[data-theme="light"] .cfg-badge{color:#ffffff}
/* The privacy page's gold button text was dark on gold; on blue it must be white. */
:root[data-theme="light"] .pp-btn{color:#ffffff}
/* The sidebar and topbar are the frame of the desk: a shade deeper than the
   page so the content reads as paper laid on a desk, not as one white sheet. */
:root[data-theme="light"] .sidebar{background:#e9edf6;border-right-color:var(--line2)}
:root[data-theme="light"] header{background:rgba(255,255,255,.85);backdrop-filter:blur(8px);border-bottom-color:var(--line2)}

/* ---- the switch ---------------------------------------------------------
   Two icons side by side, the chosen one lit: a sun for white-and-blue, a
   crown for black-and-gold. Fixed top-right on every page, before and after
   sign-in, so it is in the same place whichever page a person is on. */
.theme-switch{position:fixed;top:12px;right:14px;z-index:1200;display:inline-flex;
  align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:var(--s2,#161b28);border:1px solid var(--line2,rgba(255,255,255,.12));
  box-shadow:0 4px 14px var(--shadow,rgba(0,0,0,.4))}
.theme-switch button{appearance:none;border:0;cursor:pointer;width:32px;height:28px;
  border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ink3,#616b7e);
  transition:background .15s,color .15s,transform .15s}
.theme-switch button:hover{color:var(--ink,#e9ecf3)}
.theme-switch button:focus-visible{outline:2px solid var(--gold,#e0a750);outline-offset:1px}
.theme-switch button svg{width:16px;height:16px;display:block}
/* The chosen one: filled with the accent, its glyph in the on-accent colour.
   It is the one you cannot press, which is how a segmented control says
   "this one is current". */
.theme-switch button[aria-pressed="true"]{background:var(--gold,#e0a750);
  color:var(--on-accent,#0a0c0e);cursor:default;
  box-shadow:0 2px 8px var(--gold-dim,rgba(224,167,80,.3))}
/* In a header, it is a flex item like its neighbours: no fixed position, no
   drop shadow, a little breathing room before the next control. */
.theme-switch--inline{position:static;top:auto;right:auto;box-shadow:none;
  margin-right:6px;flex:none;align-self:center}
/* Only the fallback — a page with no header — keeps the corner. */
@media (max-width:760px){.theme-switch:not(.theme-switch--inline){top:9px;right:9px}}

/* Paper needs a real primary button. The dark theme's primary is a green tint
   with a glow, which reads as a lit key on a black desk; on white the same
   tint is just pale. Here the primary is a solid accent fill with white text
   — the one button on a page that is unmistakably the one to press. */
:root[data-theme="light"] .btn.primary{
  background:var(--gold);color:#ffffff;border-color:var(--gold);font-weight:600;
  box-shadow:0 1px 2px rgba(22,40,90,.18),0 6px 16px -6px rgba(30,64,175,.45)}
:root[data-theme="light"] .btn.primary:hover{background:#1a3a9e;border-color:#1a3a9e;color:#ffffff}
:root[data-theme="light"] .btn.primary:disabled{opacity:.55;box-shadow:none}
/* In a space-between header the switch would land in the middle; pushing it
   with an automatic left margin parks it against the right-hand group. Only
   when it has a following sibling — on the desk it already sits beside one. */
.theme-switch--inline{margin-left:auto}
.theme-switch--inline + #authbox,
.theme-switch--inline + .right{margin-left:0}

/* ==========================================================================
   Light theme: a deep-blue frame around white paper.
   --------------------------------------------------------------------------
   The header and the module rail become deep navy so the content reads as
   paper laid on a desk rather than one flat white sheet. Everything that sits
   on the frame — chips, buttons, menu items — is glass: a faint white fill, a
   hairline border, and an inset top highlight, which is the detail that makes
   it read as glass rather than as a grey box. Hover brightens the glass;
   the active item is the brightest, with a sky-blue edge so it is found by
   colour as well as by fill.

   The frame carries its own ink. The page accent is deep blue here, and deep
   blue on a deep blue rail is invisible — so nothing on the frame uses --gold.
   ========================================================================== */
:root[data-theme="light"]{
  --frame:#0f1e4d; --frame-2:#142a6b;
  --frame-ink:rgba(255,255,255,.86); --frame-ink-2:rgba(255,255,255,.62);
  --frame-ink-3:rgba(255,255,255,.42); --frame-line:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.08); --glass-line:rgba(255,255,255,.18);
  --glass-hover:rgba(255,255,255,.16); --glass-hover-line:rgba(255,255,255,.34);
  --glass-on:rgba(255,255,255,.20); --sky:#9dc4ff;
}

/* ---- the desk: header ------------------------------------------------- */
:root[data-theme="light"] header{
  background:linear-gradient(180deg,var(--frame-2),var(--frame));
  border-bottom:1px solid var(--frame-line);color:var(--frame-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 6px 24px -12px rgba(15,30,77,.6)}
:root[data-theme="light"] .brand b{color:#ffffff;letter-spacing:.18em}
:root[data-theme="light"] .brand span{color:var(--frame-ink-3)}
:root[data-theme="light"] .mark{border-color:rgba(255,255,255,.55);color:#ffffff;
  background:var(--glass)}

/* Glass pills: chips, the market chip, the account box, header buttons. */
:root[data-theme="light"] header .chip,
:root[data-theme="light"] header .mktchip,
:root[data-theme="light"] header .authbox .role,
:root[data-theme="light"] header .btn,
:root[data-theme="light"] header .theme-switch--inline{
  background:var(--glass);border:1px solid var(--glass-line);color:var(--frame-ink-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);backdrop-filter:blur(6px);
  transition:background .16s,border-color .16s,color .16s,box-shadow .16s}
:root[data-theme="light"] header .chip b,
:root[data-theme="light"] header .mktchip b,
:root[data-theme="light"] header .authbox .who{color:#ffffff}
:root[data-theme="light"] header .chip:hover,
:root[data-theme="light"] header .mktchip:hover,
:root[data-theme="light"] header .btn:hover{
  background:var(--glass-hover);border-color:var(--glass-hover-line);color:#ffffff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 14px -6px rgba(0,0,0,.4)}
/* Status keeps its meaning on glass: open is green, closed is quiet. */
:root[data-theme="light"] header .mktchip.open{color:#7ee2b5;border-color:rgba(126,226,181,.45)}
:root[data-theme="light"] header .mktchip.closed{color:var(--frame-ink-2)}
:root[data-theme="light"] header .chip .dot{box-shadow:0 0 0 2px rgba(255,255,255,.15)}
:root[data-theme="light"] header .authbox{color:var(--frame-ink-2)}
:root[data-theme="light"] header .btn.primary{background:#ffffff;color:var(--frame);border-color:#ffffff}
:root[data-theme="light"] header .btn.primary:hover{background:#eef3ff;color:var(--frame)}
/* The theme switch on the frame: glass housing, the lit icon stays white-on-blue. */
:root[data-theme="light"] header .theme-switch button{color:var(--frame-ink-2)}
:root[data-theme="light"] header .theme-switch button:hover{color:#ffffff}
:root[data-theme="light"] header .theme-switch button[aria-pressed="true"]{
  background:#ffffff;color:var(--frame)}

/* ---- the desk: module rail --------------------------------------------- */
:root[data-theme="light"] .sidebar{
  background:linear-gradient(180deg,var(--frame),#0c1840 100%);
  border-right:1px solid var(--frame-line);color:var(--frame-ink)}
:root[data-theme="light"] .navlabel{color:var(--frame-ink-3);letter-spacing:.2em}
:root[data-theme="light"] .navi{color:var(--frame-ink-2);font-weight:500;letter-spacing:.005em;
  border:1px solid transparent;transition:background .16s,color .16s,border-color .16s,box-shadow .16s}
:root[data-theme="light"] .navi .ic{opacity:.85}
:root[data-theme="light"] .navi:hover{
  background:var(--glass-hover);border-color:var(--glass-hover-line);color:#ffffff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);backdrop-filter:blur(6px)}
:root[data-theme="light"] .navi:hover .ic{opacity:1}
:root[data-theme="light"] .navi.active{
  background:linear-gradient(90deg,var(--glass-on),rgba(255,255,255,.08));
  border-color:var(--glass-hover-line);color:#ffffff;
  box-shadow:inset 3px 0 0 var(--sky),inset 0 1px 0 rgba(255,255,255,.35)}
:root[data-theme="light"] .navi.active .ic{opacity:1;color:var(--sky)}
:root[data-theme="light"] .navi .badge{color:var(--frame-ink-3)}
:root[data-theme="light"] .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
:root[data-theme="light"] .sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.38)}

/* ---- module pages: the top bar and the slide-in rail ------------------- */
:root[data-theme="light"] header.top{
  background:linear-gradient(180deg,var(--frame-2),var(--frame));
  border-bottom-color:var(--frame-line);color:var(--frame-ink)}
:root[data-theme="light"] header.top .brand{color:#ffffff}
:root[data-theme="light"] header.top .brand .dot{background:var(--sky);box-shadow:0 0 0 3px rgba(157,196,255,.25)}
:root[data-theme="light"] header.top .right{color:var(--frame-ink-2)}
:root[data-theme="light"] header.top .right a{
  color:var(--frame-ink-2);padding:6px 12px;border-radius:999px;border:1px solid transparent;
  transition:background .16s,color .16s,border-color .16s}
:root[data-theme="light"] header.top .right a:hover{
  background:var(--glass-hover);border-color:var(--glass-hover-line);color:#ffffff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}

:root[data-theme="light"] .mn-bar{
  background:linear-gradient(180deg,var(--frame),#0c1840);border-right-color:var(--frame-line)}
:root[data-theme="light"] .mn-title{color:var(--frame-ink-3);letter-spacing:.2em}
:root[data-theme="light"] .mn-item{color:var(--frame-ink-2);font-weight:500}
:root[data-theme="light"] .mn-item:hover{
  background:var(--glass-hover);border-color:var(--glass-hover-line);color:#ffffff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
:root[data-theme="light"] .mn-item.on{
  background:linear-gradient(90deg,var(--glass-on),rgba(255,255,255,.08));
  border-color:var(--glass-hover-line);color:#ffffff;
  box-shadow:inset 3px 0 0 var(--sky),inset 0 1px 0 rgba(255,255,255,.35)}
:root[data-theme="light"] .mn-item.on .mn-ic{color:var(--sky)}
/* The rail's toggle button floats over the page: deep blue so it is found. */
:root[data-theme="light"] .mn-toggle{
  background:var(--frame);border-color:var(--frame-2);color:#ffffff;
  box-shadow:0 4px 14px -4px rgba(15,30,77,.5)}
:root[data-theme="light"] .mn-toggle:hover{background:var(--frame-2);border-color:var(--sky);color:#ffffff}
:root[data-theme="light"] .mn-toggle:focus-visible{outline-color:var(--sky)}