/* ============================================================================
   PALETTE — slate. Cool hueless ink, teal accent.

   Colour ONLY. No radius, no spacing, no font, no shadow geometry. A palette
   has to be swappable under any style, which only holds if it never has an
   opinion about shape. `_check.py` fails the build if a colour literal shows up
   in a style file, or a geometry token shows up here.

   Both modes live in one block via `light-dark()`, so every value is written
   once. `color-scheme: light dark` means light unless the viewer prefers dark. The two [data-mode] rules below force a mode by
   changing nothing but `color-scheme`; drop them if the app never grows a
   manual light/dark switch (the mockup toggle uses them).
   ========================================================================= */

[data-palette="slate"] {
  color-scheme: light dark;

  --bg: light-dark(#eef0f3, #0b0c0e);
  --bg-elev: light-dark(#ffffff, #101216);
  --surface: light-dark(#ffffff, #16191d);
  --surface-2: light-dark(#f5f7f9, #1d2126);
  --wash: light-dark(rgb(0 0 0 / 0.04), rgb(255 255 255 / 0.045));
  --border: light-dark(#d7dce2, #2c3138);

  --text: light-dark(#14171a, #f1f3f5);
  --text-2: light-dark(#4c545d, #b6bec7);
  --text-3: light-dark(#626b75, #8d959e);

  /* A fill bright enough for a dark ground is never legible as text on a light
     one, so the fill and the text variant are separate tokens in both modes. */
  --accent: light-dark(#0f8288, #4fc3ca);
  --accent-hover: light-dark(#0b6b70, #63d0d6);
  --accent-ink: light-dark(#ffffff, #04262a);
  --accent-text: light-dark(#0c6e73, #57cbd2);
  --accent-border: light-dark(#7fc0c4, #2f7f85);
  --accent-wash: light-dark(rgb(15 130 136 / 0.09), rgb(79 195 202 / 0.12));
  --accent-glow: light-dark(rgb(15 130 136 / 0.35), rgb(0 0 0 / 0.4));

  --ok: light-dark(#2c7a2c, #3fa93b);
  --ok-text: light-dark(#216b21, #63c95d);
  --ok-border: light-dark(#93c893, #37703a);
  --ok-wash: light-dark(rgb(44 122 44 / 0.09), rgb(63 169 59 / 0.13));

  /* --warn is a fill with --warn-ink on it (the trip-mode banner), so it stays
     light enough to clear AA against near-black in both modes. */
  --warn: light-dark(#c98006, #e0a215);
  --warn-ink: light-dark(#241900, #201700);
  --warn-text: light-dark(#8a5400, #f0b73e);
  --warn-border: light-dark(#e0be7f, #7d6220);
  --warn-wash: light-dark(rgb(201 128 6 / 0.11), rgb(224 162 21 / 0.13));

  /* Dark had #e03c3c, which is only 4.30:1 against the white ink the
     kill-switch banner puts on it. #d63333 clears AA and still reads as
     a signal on the near-black ground (4.08:1). --err is a fill and a
     border only; error *text* is --err-text. */
  --err: light-dark(#cf2020, #d63333);
  /* the kill-switch banner puts this on the --err fill */
  --err-ink: light-dark(#ffffff, #ffffff);
  --err-text: light-dark(#b81616, #ff7570);
  --err-border: light-dark(#e59a9a, #86363a);
  --err-wash: light-dark(rgb(207 32 32 / 0.08), rgb(224 60 60 / 0.13));

  --info: light-dark(#0761c4, #3b9eff);

  --badge-bg: transparent;
  --btn-bg: light-dark(#ffffff, #1d2126);
  --btn-bg-hover: light-dark(#eef0f3, #262b31);
  --btn-border: light-dark(#cfd5dc, #343a42);
  --btn-text: light-dark(#14171a, #f1f3f5);

  --input-bg: light-dark(#ffffff, #101216);
  --input-border: light-dark(#c8cfd7, #333940);
  --switch-off: light-dark(#ccd2d9, #2c3138);
  --switch-knob: light-dark(#ffffff, #7c848d);
  --thead-bg: light-dark(#f5f7f9, #101216);

  --door-bg: light-dark(#ffffff, #1d2126);
  --door-border: light-dark(#ccd3da, #343a42);

  --rec-bg: transparent;
  --rec-border: light-dark(#e3e7ec, #262b31);

  --shadow-color: light-dark(rgb(16 24 40 / 0.14), rgb(0 0 0 / 0.45));

  /* light-dark() only takes colours, so this cannot be mode-switched inside a
     url(). One mid grey per palette instead, chosen to clear 3:1 on both that
     palette's input backgrounds. */
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%23767e88' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}

[data-palette="slate"][data-mode="dark"] {
  color-scheme: dark;
}

[data-palette="slate"][data-mode="light"] {
  color-scheme: light;
}