/* Shared color palette: Catppuccin Mocha (dark only). This is the ONE place
   colors are defined (see CLAUDE.md's Design System section, which must
   match this file). Every page/app module references the variables below;
   nothing outside this file hardcodes a color (the only exceptions are the
   PWA manifest, the theme-color meta tag and the icon files, which can't
   read CSS variables; they mirror --color-bg / --color-primary by hand).
   Linked from index.html and apps.html; app modules inject their <style>
   into the same document, so they inherit this automatically. */

:root {
  /* Native controls (date/time pickers, selects, scrollbars) render dark. */
  color-scheme: dark;

  /* The one font for the whole site: the platform's UI sans-serif (no web
     font download). */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Primitives: Catppuccin Mocha hex values. The original variable names
     are kept so nothing downstream breaks; the comment gives the Mocha
     name. (--color-rust is the "danger" red; --color-primary is mauve.) */
  --color-bg: #1e1e2e;        /* base */
  --color-ink: #cdd6f4;       /* text */
  --color-primary: #cba6f7;   /* mauve */
  --color-accent: #89b4fa;    /* blue */
  --color-secondary: #b4befe; /* lavender */
  --color-rust: #f38ba8;      /* red */
  --color-dusty: #f5c2e7;     /* pink */
  --color-mauve: #cba6f7;     /* mauve */
  --color-maroon: #eba0ac;    /* maroon */
  --color-green: #a6e3a1;     /* green */
  --color-peach: #fab387;     /* peach */
  --color-yellow: #f9e2af;    /* yellow */
  --color-teal: #94e2d5;      /* teal */
  --color-subtext1: #bac2de;  /* subtext 1 */
  --color-subtext0: #a6adc8;  /* subtext 0 */
  --color-overlay2: #9399b2;  /* overlay 2 */
  --color-overlay0: #6c7086;  /* overlay 0 */
  --color-surface1: #45475a;  /* surface 1 */
  --color-surface0: #313244;  /* surface 0 */
  --color-mantle: #181825;    /* mantle */
  --color-crust: #11111b;     /* crust */

  /* Semantic roles: everything else in the site uses these. Contrast is
     checked against --surface (base), WCAG AA for text:
       --text 11.3:1, --text-secondary 9.3:1, --text-muted 7.4:1,
       --text-faint 5.8:1 (4.45:1 on --surface-alt).
     Overlay 0 is NOT used for text (3.4:1); it outlines controls, where
     3:1 is the requirement. */
  --surface: var(--color-bg);              /* page, cards, inputs */
  --surface-alt: var(--color-surface0);    /* hover, table headers, buttons */
  --surface-deep: var(--color-surface1);   /* raised / pressed */
  --surface-sunken: var(--color-mantle);   /* side panes (sidebar) */
  --border: var(--color-surface1);         /* decorative lines, grid */
  --border-strong: var(--color-overlay0);  /* control outlines */
  --text: var(--color-ink);
  --text-secondary: var(--color-subtext1);
  --text-muted: var(--color-subtext0);
  --text-faint: var(--color-overlay2);
  --accent: var(--color-accent);           /* buttons, links, active nav, focus */
  --accent-hover: color-mix(in srgb, var(--color-accent) 80%, var(--color-ink) 20%);
  /* Subtle accent tint for selected/summary rows: never a bright fill. */
  --highlight: color-mix(in srgb, var(--color-accent) 14%, var(--color-bg));
  --success: var(--color-green);
  --warning: var(--color-peach);
  --danger: var(--color-rust);
  --scrim: color-mix(in srgb, var(--color-crust) 65%, transparent);  /* modal backdrop */
}

/* ---------- Form-control defaults (site-wide safety net) ----------
   All wrapped in :where() = zero specificity, so any component's own rule
   still wins; these only fill in what a component didn't style, replacing
   the browser defaults that clash with the palette. */

/* Focus ring: the browser default (outline: auto) draws a dark ring with a
   white halo. Use the palette accent instead. */
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Placeholders: the browser's default grey is 3.6:1 on Mocha base (below
   AA); use the faint text tone (Overlay 2, 5.8:1). */
:where(input, textarea)::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

/* Text-like fields never fall back to the browser's white background. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  background-color: var(--surface);
  color: var(--text);
}

/* Checkboxes: the native unchecked box is white. Palette version:
   unchecked = surface with a strong border, checked = accent with a tick. */
:where(input[type="checkbox"]) {
  -webkit-appearance: none;
  appearance: none;
  width: 1.05em;
  height: 1.05em;
  margin: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface);
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
}
:where(input[type="checkbox"])::before {
  content: "";
  width: 0.62em;
  height: 0.62em;
  background: var(--surface);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transition: transform 0.1s ease-in-out;
}
:where(input[type="checkbox"]:checked) {
  background: var(--accent);
  border-color: var(--accent);
}
:where(input[type="checkbox"]:checked)::before {
  transform: scale(1);
}