/**
 * Trident Investing — the design kit, after dark.
 *
 * This file changes nothing structural. Every rule in trident-design.css reads
 * its colours from the tokens below, so redefining them here turns the whole
 * system dark without touching a single animation, border or shadow rule.
 * Anything that hardcoded a colour in the original is corrected at the bottom.
 *
 * What survives from the light kit, on purpose:
 *   - the gold. It is the brand, and it is the one colour that gains on a dark
 *     background rather than losing.
 *   - the green, lifted enough to stay legible on near-black.
 * What goes: the rose. A warm pink ground reads as friendly on a café app and
 * as unserious on a money one, so the ground becomes ink with a blue cast.
 */

html, body {
  background: #0B0E14;
  color: #E7ECF3;
}

:root,
#shell,
#qRoot {
  /* Accents. The green is lifted two steps: 0E8A60 on near-black fails contrast. */
  --acc: #2FBF87;
  --acc-rgb: 47, 191, 135;
  --acc-ink: #6FE3B4;
  --warm: #E8A317;
  --warm-rgb: 232, 163, 23;
  --warm-200: #F0B845;
  --warm-ink: #F5C85F;
  --sand: #C08894;
  --sand-rgb: 192, 136, 148;
  --sand-200: #D7A3AE;

  /* Surfaces: ink, with each step a little lighter, never pure black. */
  --s-grad: linear-gradient(180deg, #11151E, #0B0E14);
  --s-0: #0B0E14;
  --s-1: #131824;
  --s-2: #1A2130;

  /* Borders are light at very low alpha, so they read at every surface depth. */
  --bd: rgba(231, 236, 243, .10);
  --bd-2: rgba(231, 236, 243, .18);
  --bd-3: rgba(231, 236, 243, .07);
  --bd-4: rgba(231, 236, 243, .14);

  /* Shadows on a dark ground have to be darker than the surface, not softer. */
  --el-1: 0 1px 2px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .35);
  --el-2: 0 2px 6px rgba(0, 0, 0, .5), 0 10px 26px rgba(0, 0, 0, .45);
  --el-3: 0 6px 14px rgba(0, 0, 0, .55), 0 26px 60px rgba(0, 0, 0, .6);

  --glass: rgba(19, 24, 36, .82);
  --glass-2: rgba(26, 33, 48, .9);
  --glass-3: rgba(19, 24, 36, .9);
  --glass-4: rgba(26, 33, 48, .84);

  /* Text: one strong shade and three quieter ones. */
  --t-0: #E7ECF3;
  --t-1: #C7D0DC;
  --t-2: #9AA6B6;
  --t-3: #8492A3;
  --t-4: #B9C4D2;
}

/* The paper grain and the warm vignette were painted for a light ground: on ink
   the grain reads as dirt and the multiply blend turns the whole page muddy. */
#shell::after { display: none; }
#shell::before {
  mix-blend-mode: normal;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--warm-rgb), .09) 0%, transparent 58%),
    radial-gradient(70% 50% at 88% 6%, rgba(var(--acc-rgb), .07) 0%, transparent 62%),
    radial-gradient(80% 60% at 8% 96%, rgba(var(--sand-rgb), .05) 0%, transparent 66%);
}

/* Links and selection follow the tokens rather than the kit's fixed rose. */
a { color: var(--t-0); }
a:hover { color: var(--acc-ink); }
::selection { background: rgba(var(--acc-rgb), .28); color: #06131D; }

/* The wordmark's ink tone was a dark colour for light paper. Inverted, it is a
   near-white with the same gold glint crossing it. */
.t-wm-ink,
[data-tone] .ink {
  color: var(--t-0);
}

/* Inputs, which the kit styles lightly because the page behind them was light. */
input, select, textarea {
  background: var(--s-1);
  color: var(--t-0);
  border: 1px solid var(--bd-2);
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acc);
  outline-offset: -1px;
}
input::placeholder { color: var(--t-3); }

/* Scrollbars, which default to a light track that glows against ink. */
* { scrollbar-color: var(--bd-2) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--bd-2);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track { background: transparent; }