/*
 * Shady Waggers design tokens: one source of truth for colour across every
 * staff tool, in both light and dark.
 *
 * How this is used. Each tool keeps its own variable names (Training calls
 * the brand teal --navy, Scheduler calls it --moss, and renaming those would
 * touch hundreds of rules for no visible gain). Instead every tool's :root
 * re-points its own names at the --sw-* tokens below. Rule bodies never
 * change, and a tool inherits dark mode for free the moment it is mapped.
 *
 * Load this BEFORE the tool's own stylesheet:
 *   <link rel="stylesheet" href="/tokens.css" />
 *   <link rel="stylesheet" href="/scheduler/scheduler.css" />
 *
 * Dark mode follows the device setting. There is no in-app theme switch, so
 * prefers-color-scheme is the whole story; if a switch is ever added, mirror
 * these blocks under :root[data-theme="dark"].
 *
 * Adding a colour? Put it here, in BOTH themes. A literal hex inside a
 * tool's rule body is the thing that breaks dark mode, every time.
 */

:root {
  /* Brand. Teal is the identity, gold is the accent that earns attention. */
  --sw-teal: #00a79d;
  --sw-teal-deep: #00776e;
  --sw-teal-deeper: #005f58;
  /* Teal has two jobs and they need opposite values in dark mode.
     --sw-teal-fill sits BEHIND white text, so it must stay dark.
     --sw-heading sits ON the page ground (headings, links, borders,
     icons), so it must lighten. One value cannot do both: white on
     #2fc0b5 is 2.25:1, and #00776e on the dark ground is 3.38:1.
     Splitting them is the only way both pass AA. */
  --sw-teal-fill: #00776e;
  --sw-heading: #00776e;
  --sw-gold: #c1882d;
  --sw-gold-deep: #9c6d23;
  --sw-gold-light: #f2c14e;

  /* Surfaces and text. Neutrals lean very slightly teal so they sit with
     the brand rather than looking like a default grey. */
  --sw-bg: #f4f7f7;
  --sw-card: #ffffff;
  --sw-card-2: #edf2f1;
  --sw-ink: #10161a;
  --sw-muted: #5f676e;
  --sw-line: #e2e7ec;

  /* Meaning, not decoration: these say good / caution / problem and are
     deliberately separate from the brand hues. */
  --sw-good: #1f9d55;
  --sw-good-bg: #e8f7ee;
  --sw-warn: #b7791f;
  --sw-warn-bg: #fdf6e3;
  --sw-bad: #b23b2e;
  --sw-bad-bg: #fdecea;
  --sw-info: #33627a;
  --sw-info-bg: #dbe9ee;

  --sw-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .06);
  --sw-radius: 14px;
  /* Minimum comfortable tap target: these tools get used one-handed,
     outdoors, holding a leash. */
  --sw-tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Teal lifts in dark: the daylight teal on a dark ground is muddy and
       fails contrast on body text. */
    --sw-teal: #2fc0b5;
    --sw-teal-fill: #00776e;   /* white on this = 5.43:1 */
    --sw-heading: #2fc0b5;     /* on the dark ground = 8.16:1 */
    --sw-teal-deep: #00776e;
    --sw-teal-deeper: #005f58;
    --sw-gold: #e0aa55;
    --sw-gold-deep: #c1882d;
    --sw-gold-light: #f2c14e;

    --sw-bg: #0f151b;
    --sw-card: #1a222b;
    --sw-card-2: #222c36;
    --sw-ink: #e6edf3;
    --sw-muted: #9aa4af;
    --sw-line: #2a333d;

    --sw-good: #5fc98d;
    --sw-good-bg: #14291f;
    --sw-warn: #e5c07b;
    --sw-warn-bg: #2e2614;
    --sw-bad: #f08a7e;
    --sw-bad-bg: #2a1a1a;
    --sw-info: #7fb4cc;
    --sw-info-bg: #16262e;

    --sw-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  }
}