/* ─────────────────────────────────────────────────────
   adsbyvalr — dark ground
   Modernist re-grounded. Loaded after styles.css, before pages.css.

   The system ships a light ground, but it anticipates this one: the readme
   specifies accent-400 for pressed states "on a dark one", and the shadow
   tokens are documented as "a hairline edge + ambient darkness on a dark
   one". Nothing here invents a hue — the ground and ink are re-derived and
   the ramps are used at the step the readme names for a dark surface.

   Everything else about the system is untouched: Archivo, zero radius,
   2px rules, flush-left, red spent as a mark with one field moment.
──────────────────────────────────────────────────────── */

:root {
  /* — the ground — */
  --color-bg: #0d0d0f;      /* near-black, faint cool cast */
  --color-surface: #17171a; /* graphite: the raised cell */
  --color-text: #ece8e4;    /* warm paper, reversed out */

  /* rules read light on a dark ground; the 2px weight carries the structure */
  --color-divider: color-mix(in srgb, #ece8e4 26%, transparent);

  /* --color-accent stays the brand red for FILLS and the red field.
     Small accent-colored TEXT takes a bright ramp step here — the deep
     steps the light ground uses would disappear into the ink. */
  --accent-ink: var(--color-accent-500);   /* #ff563c — 6.0:1 on this ground */
  --accent-ink-strong: var(--color-accent-400);

  /* — elevation: a hairline edge plus ambient darkness — */
  --shadow-sm: 0 0 0 1px color-mix(in srgb, #ece8e4 8%, transparent);
  --shadow-md: 0 0 0 1px color-mix(in srgb, #ece8e4 10%, transparent), 0 6px 18px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 0 0 1px color-mix(in srgb, #ece8e4 12%, transparent), 0 18px 44px rgb(0 0 0 / 0.65);
}

/* ─── COMPONENT RE-GROUNDING ──────────────────────── */
/* The component layer in styles.css resolves almost entirely through the
   tokens above. These are the few places where the light ground was
   assumed and the dark one needs the other end of the ramp. */

/* interactive states: one step past the base — accent-400 on a dark ground */
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-500); }
.btn-primary:active { background: var(--color-accent-400); }

.btn-ghost { color: var(--accent-ink); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 28%, transparent); }

.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 10%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 18%, transparent); }

a { color: var(--accent-ink); }

/* tinted fills invert: the light ramp steps become the dark ones */
.tag-accent { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent-300); }
.tag-accent-2 { background: color-mix(in srgb, var(--color-accent-2) 18%, transparent); color: var(--color-accent-2-300); }
.tag-neutral { background: var(--color-neutral-900); color: var(--color-neutral-300); }
.tag-outline { border-color: var(--accent-ink); color: var(--accent-ink); }

.card-kicker { color: var(--accent-ink); }

.nav a:hover, .nav a[aria-current='page'] { color: var(--accent-ink); }

.input { background: var(--color-surface); }
.input::placeholder { color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 50%, transparent); }

.radio input:checked + .dot { box-shadow: inset 0 0 0 4px var(--color-bg); }

.dialog-backdrop { background: rgb(0 0 0 / 0.72); }

/* form controls keep the ground's own scheme — no browser-light dropdowns */
:root { color-scheme: dark; }

/* ─── IMAGERY ON A DARK GROUND ────────────────────── */
/* Photography still prints in pure black and white via .grayscale.
   Interface DOCUMENTS (dashboards, reports) are not photographs — they get
   .doc, which strips the color and reverses the paper so a screenshot sits
   on the ground instead of burning a white hole in it. */
.doc { filter: grayscale(1) invert(1) contrast(1.04); }