/* Roostack design tokens (docs/DESIGN.md).

   Three layers:
   1. Palette   themes/<name>.css: a theme's raw colours for light (-l)
                and dark (-d), selected by data-palette on <html>.
   2. Purpose   below: what components use (--accent, --surface, ...),
                picked from the palette for the current mode.
   3. Scales    below: spacing, type, radius, shadow.

   Components only use purpose tokens and scales, never palette colours,
   so a new built-in theme is just a new palette file.

   Mode is data-mode on <html> ("light" or "dark"; absent = follow the
   device). It also works on any element, e.g. the gallery's side-by-side
   light and dark panels. */

/* Space Grotesk, for headings and figures (the website's heading font;
   SIL Open Font License, fonts/space-grotesk-OFL.txt). Latin only, one
   variable file for every weight. */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700; font-display: swap;
}

:root {
  /* Spacing: 4px steps at the small end. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;

  /* Type: base is 16px, 15px in tables and the sidebar (the Owner's
     choice, 2026-10-14; it was 17px). Headings and figures use the display
     font. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.78rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.15rem;
  --text-xl: 1.35rem; --text-2xl: 1.7rem;
  --weight-normal: 400; --weight-medium: 500; --weight-bold: 600;
  --leading: 1.5;

  --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 6%), 0 1px 3px rgb(0 0 0 / 4%);
  --focus-ring: 0 0 0 3px var(--highlight-soft), 0 0 0 1px var(--highlight);

  /* Status colours: shared by Roostack's own themes, so "problem" always
     looks like a problem. A palette may override them (--pal-ok-l, ...),
     e.g. Catppuccin uses its own green, yellow and red. */
  --status-ok-l: #17603f; --status-ok-bg-l: #e3f5ec;
  --status-warn-l: #8a4b00; --status-warn-bg-l: #fdf1dc;
  --status-bad-l: #b3261e; --status-bad-bg-l: #fce8e6; --status-bad-fg-l: #ffffff;
  --status-ok-d: #7ee2ae; --status-ok-bg-d: #133426;
  --status-warn-d: #f5c16c; --status-warn-bg-d: #3a2a0e;
  --status-bad-d: #ff8a80; --status-bad-bg-d: #3d1714; --status-bad-fg-d: #2a0806;

  /* Chart colours (2026-10-03), for parts of a whole such as the disk bar:
     the same in every theme, since themes' accent and highlight are often
     close hues. Blue, magenta, violet, in that order (checked with the
     dataviz validator against every theme's surface, light and dark: the
     adjacent pairs stay apart for colour-blind readers). Not orange,
     yellow, red or green, which mean warning, problem and OK. Each part
     also has a label, so colour never carries it alone. */
  --chart-1-l: #2a78d6; --chart-2-l: #e87ba4; --chart-3-l: #4a3aa7;
  --chart-1-d: #3987e5; --chart-2-d: #d55181; --chart-3-d: #9085e9;

  /* The tile behind a service's logo (2026-10-14): light in every theme
     and mode, since projects draw their logos for light backgrounds
     (Vaultwarden's is black), with dark lines for a drawn icon on it. */
  --logo-tile: #f6f6f3; --logo-tile-fg: #3a3a36;

  /* The aurora behind the page (Console glass, docs/DESIGN.md "Layout"):
     how strongly its accent and highlight circles show, per mode. The
     contrast test checks text on cards over the accent at this strength. */
  --aurora-l: 0.11; --aurora-d: 0.20;
}

/* Light (the default, and data-mode="light" anywhere). */
:root, [data-mode="light"] {
  color-scheme: light;
  --bg: var(--pal-bg-l); --surface: var(--pal-surface-l); --surface-2: var(--pal-surface-2-l);
  --fg: var(--pal-fg-l); --muted: var(--pal-muted-l);
  --border: var(--pal-border-l); --border-strong: var(--pal-border-strong-l);
  --accent: var(--pal-accent-l); --accent-fg: var(--pal-accent-fg-l); --accent-soft: var(--pal-accent-soft-l);
  --highlight: var(--pal-highlight-l); --highlight-fg: var(--pal-highlight-fg-l); --highlight-soft: var(--pal-highlight-soft-l);
  --ok: var(--pal-ok-l, var(--status-ok-l)); --ok-bg: var(--pal-ok-bg-l, var(--status-ok-bg-l));
  --warn: var(--pal-warn-l, var(--status-warn-l)); --warn-bg: var(--pal-warn-bg-l, var(--status-warn-bg-l));
  --bad: var(--pal-bad-l, var(--status-bad-l)); --bad-bg: var(--pal-bad-bg-l, var(--status-bad-bg-l)); --bad-fg: var(--pal-bad-fg-l, var(--status-bad-fg-l));
  /* The status green that shows on a text-coloured shape (the brand mark's
     online light on its server): the other mode's green, unless the
     palette sets its own (--pal-ok-on-fg-l/-d). */
  --ok-on-fg: var(--pal-ok-on-fg-l, var(--pal-ok-d, var(--status-ok-d)));
  --chart-1: var(--chart-1-l); --chart-2: var(--chart-2-l); --chart-3: var(--chart-3-l);
  /* Console glass (2026-10-14): the page behind the cards, translucent
     text colour for insets and edges over the aurora, and a card's shadow.
     Derived here per mode (not in :root), so an element with its own
     data-mode gets its own mode's values. */
  --canvas: var(--bg);
  --glass: color-mix(in srgb, var(--fg) 4%, transparent); --glass-2: color-mix(in srgb, var(--fg) 7%, transparent);
  --edge: color-mix(in srgb, var(--fg) 10%, transparent); --edge-strong: color-mix(in srgb, var(--fg) 17%, transparent);
  --lift: 0 1px 2px rgb(0 0 0 / 5%), 0 4px 14px rgb(0 0 0 / 5%);
  --aurora: var(--aurora-l);
}

/* Dark: when the device prefers it and the user hasn't chosen light, or
   when data-mode="dark". The two blocks must stay identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    color-scheme: dark;
    --bg: var(--pal-bg-d); --surface: var(--pal-surface-d); --surface-2: var(--pal-surface-2-d);
    --fg: var(--pal-fg-d); --muted: var(--pal-muted-d);
    --border: var(--pal-border-d); --border-strong: var(--pal-border-strong-d);
    --accent: var(--pal-accent-d); --accent-fg: var(--pal-accent-fg-d); --accent-soft: var(--pal-accent-soft-d);
    --highlight: var(--pal-highlight-d); --highlight-fg: var(--pal-highlight-fg-d); --highlight-soft: var(--pal-highlight-soft-d);
    --ok: var(--pal-ok-d, var(--status-ok-d)); --ok-bg: var(--pal-ok-bg-d, var(--status-ok-bg-d));
    --warn: var(--pal-warn-d, var(--status-warn-d)); --warn-bg: var(--pal-warn-bg-d, var(--status-warn-bg-d));
    --bad: var(--pal-bad-d, var(--status-bad-d)); --bad-bg: var(--pal-bad-bg-d, var(--status-bad-bg-d)); --bad-fg: var(--pal-bad-fg-d, var(--status-bad-fg-d));
    --ok-on-fg: var(--pal-ok-on-fg-d, var(--pal-ok-l, var(--status-ok-l)));
    --chart-1: var(--chart-1-d); --chart-2: var(--chart-2-d); --chart-3: var(--chart-3-d);
    --canvas: color-mix(in srgb, var(--bg) 62%, black);
    --glass: color-mix(in srgb, var(--fg) 4%, transparent); --glass-2: color-mix(in srgb, var(--fg) 7%, transparent);
    --edge: color-mix(in srgb, var(--fg) 10%, transparent); --edge-strong: color-mix(in srgb, var(--fg) 17%, transparent);
    --lift: 0 1px 0 color-mix(in srgb, var(--fg) 6%, transparent) inset, 0 10px 30px rgb(0 0 0 / 35%);
    --aurora: var(--aurora-d);
  }
}
[data-mode="dark"] {
  color-scheme: dark;
  --bg: var(--pal-bg-d); --surface: var(--pal-surface-d); --surface-2: var(--pal-surface-2-d);
  --fg: var(--pal-fg-d); --muted: var(--pal-muted-d);
  --border: var(--pal-border-d); --border-strong: var(--pal-border-strong-d);
  --accent: var(--pal-accent-d); --accent-fg: var(--pal-accent-fg-d); --accent-soft: var(--pal-accent-soft-d);
  --highlight: var(--pal-highlight-d); --highlight-fg: var(--pal-highlight-fg-d); --highlight-soft: var(--pal-highlight-soft-d);
  --ok: var(--pal-ok-d, var(--status-ok-d)); --ok-bg: var(--pal-ok-bg-d, var(--status-ok-bg-d));
  --warn: var(--pal-warn-d, var(--status-warn-d)); --warn-bg: var(--pal-warn-bg-d, var(--status-warn-bg-d));
  --bad: var(--pal-bad-d, var(--status-bad-d)); --bad-bg: var(--pal-bad-bg-d, var(--status-bad-bg-d)); --bad-fg: var(--pal-bad-fg-d, var(--status-bad-fg-d));
  --ok-on-fg: var(--pal-ok-on-fg-d, var(--pal-ok-l, var(--status-ok-l)));
  --chart-1: var(--chart-1-d); --chart-2: var(--chart-2-d); --chart-3: var(--chart-3-d);
  --canvas: color-mix(in srgb, var(--bg) 62%, black);
  --glass: color-mix(in srgb, var(--fg) 4%, transparent); --glass-2: color-mix(in srgb, var(--fg) 7%, transparent);
  --edge: color-mix(in srgb, var(--fg) 10%, transparent); --edge-strong: color-mix(in srgb, var(--fg) 17%, transparent);
  --lift: 0 1px 0 color-mix(in srgb, var(--fg) 6%, transparent) inset, 0 10px 30px rgb(0 0 0 / 35%);
  --aurora: var(--aurora-d);
}