/* Medium and Dark themes, chosen in Settings → Theme and set as data-theme on <html> by js/theme.js.
   "light" is the default in css/theme.css. Only Margin palette colours are used (see css/theme.css). */

/* Medium: an Ash ground with Fog and Paper cards; the sidebar and feature blocks stay Graphite. */
:root[data-theme="medium"] {
  --ink: #111113;
  --ink-2: #26262A;
  --ink-3: #4A4A52;
  --muted: #4A4A52;
  --faint: #55555C;
  --soft-voice: #44444B;
  --line: #C4C4CA;
  --line-soft: #D4D4D8;
  --line-strong: #111113;

  --paper: #A1A1AA;
  --paper-hi: #F4F4F5;
  --paper-lo: #E4E4E7;
  --card: #FAFAFA;

  --hover: rgba(17,17,19,.08);
  --edge: inset 0 0 0 1px rgba(17,17,19,.08);
  --grad-page: linear-gradient(180deg, #A1A1AA 0%, #8E8E96 100%);
  --grad-card: linear-gradient(180deg, #FAFAFA 0%, #F4F4F5 100%);
  --grad-text: linear-gradient(180deg, #0C0C0E 35%, #26262A 100%);
  --grad-text-soft: linear-gradient(180deg, #26262A 0%, #44444B 100%);
  --shadow-chip: 0 1px 2px rgba(17,17,19,.1), 0 8px 24px -12px rgba(17,17,19,.3);
  --shadow-card: 0 1px 2px rgba(17,17,19,.1), 0 18px 40px -22px rgba(17,17,19,.4);
  color-scheme: light;
}
/* Text that sits straight on the Ash ground needs the darker neutrals to stay readable. */
:root[data-theme="medium"] .intro .eyebrow,
:root[data-theme="medium"] .lead p,
:root[data-theme="medium"] .content > .content-inner > main > .toolbar-row .muted,
:root[data-theme="medium"] .table-foot,
:root[data-theme="medium"] .month-summary,
:root[data-theme="medium"] .month-summary .eyebrow,
:root[data-theme="medium"] .weekday,
:root[data-theme="medium"] .day.outside { color: #26262A; }
:root[data-theme="medium"] .landing {
  --page: #A1A1AA;
  --body-text: #26262A;
  --glass: color-mix(in srgb, #FAFAFA 70%, transparent);
}
:root[data-theme="medium"] .landing .kicker,
:root[data-theme="medium"] .landing .foot-inner > p,
:root[data-theme="medium"] .landing .foot-legal,
:root[data-theme="medium"] .landing .plan-note,
:root[data-theme="medium"] .landing .facts span { color: #26262A; }
:root[data-theme="medium"] .landing .facts div { border-color: #8E8E96; }
:root[data-theme="medium"] .landing .dark-band .kicker { color: #A1A1AA; }

/* Dark: an Ink ground, Graphite cards, Paper text. */
:root[data-theme="dark"] {
  --ink: #F4F4F5;
  --ink-2: #D4D4D8;
  --ink-3: #C4C4CA;
  --muted: #A1A1AA;
  --faint: #8E8E96;
  --soft-voice: #6B6B73;
  --line: #2E2E33;
  --line-soft: #26262A;
  --line-strong: #F4F4F5;

  --paper: #0C0C0E;
  --paper-hi: #26262A;
  --paper-lo: #2E2E33;
  --card: #1C1C1F;

  --night: #0C0C0E;
  --night-2: #111113;
  --night-3: #2E2E33;
  --night-line: #44444B;
  --night-fg: #F4F4F5;
  --night-muted: #A1A1AA;
  --night-faint: #8E8E96;

  --gain-soft: color-mix(in srgb, #15803D 24%, #1C1C1F);
  --loss-soft: color-mix(in srgb, #B91C1C 24%, #1C1C1F);

  --on-ink: #111113;
  --hover: rgba(244,244,245,.07);
  --backdrop: rgba(12,12,14,.7);

  --edge: inset 0 0 0 1px rgba(244,244,245,.06);
  --shadow-chip: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px -8px rgba(0,0,0,.6);
  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px -20px rgba(0,0,0,.7);
  --shadow-night: 0 30px 60px -26px rgba(0,0,0,.8);
  --shadow-deep: 0 40px 90px -30px rgba(0,0,0,.8), 0 12px 24px -12px rgba(0,0,0,.5);
  --shadow-button: 0 12px 30px -10px rgba(0,0,0,.6);

  --grad-page: linear-gradient(180deg, #111113 0%, #0C0C0E 100%);
  --grad-ink: linear-gradient(180deg, #FAFAFA 0%, #D4D4D8 100%);
  --grad-ink-strong: linear-gradient(180deg, #FAFAFA 0%, #C4C4CA 100%);
  --grad-card: linear-gradient(180deg, #1C1C1F 0%, #111113 100%);
  --grad-night: linear-gradient(160deg, #26262A 0%, #0C0C0E 75%);
  --grad-night-card: linear-gradient(160deg, #2E2E33 0%, #111113 75%);
  --grad-text: linear-gradient(180deg, #FAFAFA 35%, #8E8E96 100%);
  --grad-text-soft: linear-gradient(180deg, #6B6B73 0%, #55555C 100%);
  color-scheme: dark;
}
:root[data-theme="dark"] select.input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23C4C4CA' stroke-width='1.6'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .chart-wrap .chart-peek { border: 1px solid var(--night-line); }

/* Profit #15803D and Loss #B91C1C only reach 2.3–3.4:1 on dark grounds, too faint for figures. In Dark the
   figure itself is Paper and a Profit or Loss dot in front of it reports the result. */
:root[data-theme="dark"] .gain:not(.result-mark),
:root[data-theme="dark"] .loss:not(.result-mark) { color: var(--ink); }
:root[data-theme="dark"] .gain:not(.result-mark)::before,
:root[data-theme="dark"] .loss:not(.result-mark)::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.38em;
  border-radius: 50%;
  vertical-align: 0.08em;
  background: #15803D;
  box-shadow: 0 0 0 1.5px rgba(244,244,245,.18);
}
:root[data-theme="dark"] .loss:not(.result-mark)::before { background: #B91C1C; }
/* Figures that sit inside another coloured figure get one dot, not two. */
:root[data-theme="dark"] .gain .gain::before, :root[data-theme="dark"] .loss .loss::before,
:root[data-theme="dark"] .gain .loss::before, :root[data-theme="dark"] .loss .gain::before { content: none; }

:root[data-theme="dark"] .night .segmented button:not([aria-pressed="true"]),
:root[data-theme="dark"] .mp-tabs.dim { color: var(--night-muted); }
:root[data-theme="dark"] .rule-bad { background: #B91C1C; color: #FFFFFF; }
:root[data-theme="dark"] .rule-target { background: #15803D; color: #FFFFFF; }
:root[data-theme="dark"] .link-btn.danger { color: var(--ink); text-decoration: underline; text-decoration-color: #B91C1C; text-decoration-thickness: 2px; text-underline-offset: 4px; }
:root[data-theme="dark"] .field.invalid .error, :root[data-theme="dark"] .error { color: var(--ink); }
:root[data-theme="dark"] .error::before { content: "● "; color: #B91C1C; }
:root[data-theme="dark"] .rule-warning { color: var(--ink); box-shadow: inset 3px 0 0 #B91C1C; }

:root[data-theme="medium"] .intro .segmented button:not([aria-pressed="true"]),
:root[data-theme="medium"] .intro .stepper .btn-quiet { color: #26262A; }

/* Medium: text that sits straight on the Ash ground in the dashboard header */
:root[data-theme="medium"] .dash-period { color: #26262A; }