/* Design tokens, lifted from the Claude Design bundle.
 *
 * The .dc.html prototypes name colours positionally (--c1, --c2 …) and the
 * numbering differs between files, so the raw values are re-mapped here to
 * semantic names. Values are the designs' own oklch() literals.
 *
 * One theme only. Dark mode was dropped on 2026-08-25: the design is authored
 * light, and maintaining a second palette meant every new colour needed a
 * counterpart invented for it. */

:root {
  color-scheme: light;
  --surface-page: oklch(0.99 0.006 250);
  --surface-raised: oklch(0.995 0.006 250);
  --surface-sunken: oklch(0.96 0.006 250);
  --surface-hover: oklch(0.94 0.006 250);

  --text-primary: oklch(0.22 0.025 265);
  --text-secondary: oklch(0.4 0.025 265);
  --text-muted: oklch(0.5 0.006 250);

  --border: oklch(0.86 0.006 250);
  --border-strong: oklch(0.82 0.006 250);

  --accent: oklch(0.5 0.18 275);
  --accent-hover: oklch(0.42 0.18 275);
  --accent-solid: oklch(0.51 0.21 275);
  --accent-solid-hover: oklch(0.45 0.21 275);
  --on-accent: oklch(0.99 0.005 275);
  --accent-subtle: oklch(0.93 0.04 275);
  --accent-subtle-fg: oklch(0.3 0.05 275);

  --ok-bg: oklch(0.93 0.05 215);
  --ok-fg: oklch(0.4 0.1 215);
  --warn-bg: oklch(0.93 0.04 85);
  --warn-fg: oklch(0.48 0.11 85);
  --neutral-bg: oklch(0.93 0.006 250);
  --neutral-fg: oklch(0.45 0.006 250);

  /* Dashboard stat tints, exactly as the design specifies. */
  --tint-playing: #D8EFDA;
  --tint-error: rgba(255, 231, 228, 0.3);
  --tint-storage: #E5E7F7;
  --tint-soon: #E0E6FFE3;

  /* Cyan, used by the landing page's step card, its buttons and its background
     washes. These are the design's LIGHT values — the first pass took them from
     the dark theme block, which made the washes near-black smudges instead of
     pale mint, and the diamond icon chip dark instead of tinted. */
  --cyan: oklch(0.75 0.13 195);
  --cyan-tint: oklch(0.94 0.05 195);
  --ink: oklch(0.2 0.025 265);
  --ink-card: #101622;
  --tint-feature-a: #8FD6E433;
  --tint-feature-b: #DFEFF5;
  /* The landing page's canvas is two steps darker than the app's page surface;
     on --surface-page the decorative washes are almost invisible. */
  --canvas: oklch(0.97 0.006 250);

  /* The sidebar is a dark panel on a light page, so its own colours are fixed
     rather than drawn from the surface tokens. */
  --sidebar-bg: linear-gradient(180deg, #11275B, #000000);
  --sidebar-text: #B3B3B3A3;
  --sidebar-text-strong: #FBF9F9;
  --sidebar-tag: #909090;
  --sidebar-hover: rgba(255, 255, 255, 0.08);

  --danger: oklch(0.5 0.18 27);
  --danger-bg: oklch(0.95 0.03 27);
  --danger-border: oklch(0.82 0.08 27);
  --danger-solid: oklch(0.55 0.21 27);
  --danger-hover: oklch(0.45 0.18 27);

  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  --radius: 6px;
  --radius-lg: 10px;
  --sidebar-w: 216px;
  --topbar-h: 54px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
h2 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }

input[type="checkbox"] { accent-color: var(--accent-solid); width: 15px; height: 15px; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }