@layer tokens {
  :root {
    /* Surface / text */
    /* Tell the browser to draw native controls (option popups, scrollbars,
       date pickers) with light defaults */
    color-scheme: light;
    /* Fallback matches the meadow's mid-sky so a slow image load doesn't flash */
    --bg: #c8ddec;
    --text: #141414;
    --text-muted: rgba(20, 20, 20, 0.6);
    /* Light halo lifts thin dark text off the scene */
    --text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    /* Daylight meadow: sky, sun bloom and ground. The grass lives in the
       fixed strips below so the wind can move it (meadow.css). */
    --bg-image: url("/assets/meadow-day-9096bc68.svg");
    --grass-far: url("/assets/grass-far-day-429ffa06.svg");
    --grass-mid: url("/assets/grass-mid-day-5f64faa8.svg");
    --grass-near: url("/assets/grass-near-day-3e3269b9.svg");

    /* Glass */
    --glass-bg: rgba(255, 255, 255, 0.18);
    --glass-bg-strong: rgba(255, 255, 255, 0.50);
    /* Panes drink a little of the scene's colour, like real glass. Every
       backdrop-filter in the app routes through this token. */
    --glass-filter: blur(var(--glass-blur)) saturate(1.4);
    --glass-filter-strong: blur(12px) saturate(1.4);
    /* Nav frost — kept as a light frost in both themes (the dark mode
       inverts content panels to a dark mist, but the navbar stays frosted). */
    --nav-bg: var(--glass-bg);
    --glass-border: rgba(255, 255, 255, 0.45);
    --glass-highlight: rgba(255, 255, 255, 0.75);
    --glass-blur: 4px;
    /* Dropdown surface: the nav's 4px blur barely frosts, so the fill carries
       legibility — opaque enough to read links over the busy background. */
    --menu-bg: rgba(245, 246, 248, 0.82);
    --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.12);
    /* Button/link frost — white in light mode, flipped dark below. */
    --btn-bg: rgba(255, 255, 255, 0.5);

    /* Accent */
    --accent: #2f7fd6;
    --accent-strong: #2266b8;
    --accent-soft: rgba(47, 127, 214, 0.16);
    --accent-contrast: #ffffff;

    /* Danger — destructive actions (remove, clear, delete) */
    --danger: #c0392b;

    /* Chart palette — accent first, then a healthy green, an amber caution and
       the danger red. Used by the owner dashboard graphs. */
    --chart-1: #2f7fd6;
    --chart-2: #2e9e6b;
    --chart-3: #c9a227;
    --chart-4: #c0392b;
    --chart-track: rgba(20, 20, 20, 0.12);

    /* Shape & type */
    --radius: 16px;
    --radius-sm: 10px;
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  /* Dark theme — glass reads as a dark mist that sinks the night scene back
     so light text holds its contrast */
  :root.dark {
    /* Dark defaults so native <option> popups render light-on-dark */
    color-scheme: dark;
    /* Fallback matches the night sky's midpoint */
    --bg: #17233e;
    --text: #fcfdff;
    --text-muted: rgba(252, 253, 255, 0.65);
    /* Dark halo lifts thin light text off the scene */
    --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    /* Moonlit meadow: sky, moon, stars and static distant fireflies; grass
       swaps to its night strips. */
    --bg-image: url("/assets/meadow-night-e7b6ab7c.svg");
    --grass-far: url("/assets/grass-far-night-138422e3.svg");
    --grass-mid: url("/assets/grass-mid-night-d488c3e8.svg");
    --grass-near: url("/assets/grass-near-night-169269ad.svg");

    /* Inverted mist: a dark translucent pane sits over the night scene and
       gives light text a consistent low-key backing — a faint white frost
       (the light-mode approach) barely dims the scene and leaves text
       fighting bright patches (moon halo, stars). Mirrors --btn-bg below. */
    --glass-bg: rgba(0, 0, 0, 0.32);
    --glass-bg-strong: rgba(0, 0, 0, 0.52);
    /* Navbar keeps its original faint white frost — left intact while the
       content panels above go dark. */
    --nav-bg: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-highlight: rgba(255, 255, 255, 0.40);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.40);
    --menu-bg: rgba(30, 30, 34, 0.82);
    /* Inverted frost: a dark translucent pane reads cleanly over the night scene. */
    --btn-bg: rgba(0, 0, 0, 0.45);

    --accent: #6aa9e9;
    --accent-strong: #86bdf2;
    --accent-soft: rgba(106, 169, 233, 0.18);

    --danger: #ef8a82;

    --chart-1: #6aa9e9;
    --chart-2: #58c08c;
    --chart-3: #e2c25c;
    --chart-4: #ef8a82;
    --chart-track: rgba(255, 255, 255, 0.14);
  }
}