/* HouseChalk colour — dark appearance. Set data-theme="dark" on <html>.
 *
 * COOL NEAR-BLACK, NOT BLUE-BLACK. The light appearance is a neutral cool grey,
 * so its dark counterpart is the same neutral inverted rather than a tinted
 * one; a blue-black canvas under a blue action makes the action disappear.
 *
 * ACCENTS GO BRIGHT, AND THE FILL'S INK GOES DARK. The darkening that makes
 * white safe on pigment in light makes the fill vanish here, so a lighter blue
 * becomes the fill and a near-black becomes the text on it.
 *
 * THE LADDER STAYS IN THE SAME ORDER. A card is LIGHTER than the page, a zone
 * is DARKER than it, and the well is darker still — the same "above / beside /
 * below" relationship the light appearance has, which is why a component never
 * has to know which appearance it is in.
 *
 * SHADOWS DO NOT READ HERE. Elevation becomes value and the hairline carries
 * what the lift used to. The flattened tokens are written `0 0 #0000`, never
 * `none`: these tokens get COMPOSED into comma-separated shadow lists and
 * `none` is only legal as a whole value.
 */
:root[data-theme="dark"]{
  color-scheme:dark;

  --surface:#18191C;            /* the page */
  --surface-card:#232529;       /* above the page */
  --surface-container:#121316;  /* a zone: below the page, same as in light */
  --surface-lowest:#0E0F11;     /* a well inside a card */

  --on-surface:#F7F7F8;
  --on-surface-variant:#A8ACB3;
  --on-surface-dense:#BFC3C9;   /* smaller text, so LIGHTER here — the rule is
                                   "more contrast as text gets smaller", and in
                                   dark that means moving toward the ink, not
                                   away from it */

  --outline:#2E3035;
  --outline-strong:#43464C;
  --control-outline:#82858C;     /* 4.15:1 on --surface-card. Load-bearing here:
                                    dark flattens --shadow-whisper to 0 0 #0000,
                                    so an --outline edge would leave a control
                                    as a 1.15:1 fill inside a 1.16:1 edge
                                    carrying no shadow at all. */
  --disabled:#5C6067;
  --rule-ink:color-mix(in srgb, var(--on-surface) 12%, transparent);
  --rail-ink:color-mix(in srgb, var(--on-surface) 26%, transparent);
  --hairline:var(--outline);

  /* The rail barely moves between appearances — it is already dark in light,
     which is the point of it. */
  --rail-surface:#101215;
  --on-rail:#F7F7F8;
  --on-rail-muted:#8E949C;
  --rail-active:var(--primary);
  --rail-hairline:color-mix(in oklch, var(--on-rail) 12%, transparent);

  --primary:#8B98EC;
  --primary-flat:#6E7DE0;
  --primary-deep:#AEB8F3;
  --on-primary:#0B0E1F;
  --primary-surface:#22253A;

  --success:#59A686;
  --success-deep:#8ECBAF;
  --success-surface:#1A2A23;

  --amber-deep:#E0A472;
  --indigo-deep:#B0A8E0;
  --terracotta-deep:#E09B9B;

  --danger:#E96A6A;
  --danger-deep:#F0908F;

  /* The hero stays dark and its ink stays light. --on-hero is deliberately NOT
     re-pointed here. */
  --hero-start:#232A5C;
  --hero-end:#151833;

  --shell:#18191C;
  --on-shell:#F7F7F8;
  --shell-muted:#A8ACB3;
  --shell-selected:#2A2E45;

  --evidence-fill:rgba(139,152,236,0.10);
  --evidence-halo:rgba(139,152,236,0.14);
  --well:#08090B;

  --shadow-whisper:0 0 #0000;
  --shadow-soft:0 0 #0000;
  --shadow-card:0 24px 48px -12px rgba(0,0,0,0.55);
  --shadow-float:0 36px 72px -20px rgba(0,0,0,0.6);
  --shadow-glow:0 0 #0000;

  --page-ground:#0C0D0F;
}