/* Shappa design tokens (docs/DESIGN.md). Semantic custom properties only — components never
   reference raw values. Light values are the default; the dark set is defined once below and
   applied both for system preference and the manual theme toggle, so keep the two blocks equal. */
:root {
  color-scheme: light dark;

  /* Colour */
  --bg: #f4f5f3;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --ink: #17201d;
  --ink-muted: #57635e;
  --line: #dee3e0;
  --accent: #0e6b5c;
  --accent-ink: #ffffff;
  --accent-soft: #dcebe7;
  --accent-ink-soft: #0b4a3f;
  --danger: #b3261e;
  --success: #1f6f46;
  --focus: #0e6b5c;
  --hover: rgb(23 32 29 / 5%);

  /* Spacing — 4px base scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Typography — system stack first (DESIGN.md); a webfont is a later decision */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);
  --text-xs: 0.8125rem;
  --text-s: 0.875rem;
  --text-m: 1rem;
  --text-l: 1.25rem;
  --text-xl: 1.5rem;

  /* Radius and elevation — calm, at most two levels */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --shadow-1: 0 1px 2px rgb(23 32 29 / 6%), 0 1px 3px rgb(23 32 29 / 8%);
  --shadow-2: 0 4px 12px rgb(23 32 29 / 12%), 0 2px 4px rgb(23 32 29 / 8%);
}

/* The dark token set, shared by system preference and the explicit choice. The system block at
   the end only applies before theme.js (or the inline script in index.html) has set data-theme,
   so it can never override the named themes below. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #121715;
  --surface: #1a211e;
  --surface-raised: #222b27;
  --ink: #e4e9e6;
  --ink-muted: #9faba5;
  --line: #2c3631;
  --accent: #52c2a8;
  --accent-ink: #0b1f1a;
  --accent-soft: #1f3a33;
  --accent-ink-soft: #9fe3d0;
  --danger: #ef9a8a;
  --success: #7fd3a6;
  --focus: #6fd6bd;
  --hover: rgb(228 233 230 / 7%);

  --shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 45%), 0 2px 4px rgb(0 0 0 / 35%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --bg: #121715;
    --surface: #1a211e;
    --surface-raised: #222b27;
    --ink: #e4e9e6;
    --ink-muted: #9faba5;
    --line: #2c3631;
    --accent: #52c2a8;
    --accent-ink: #0b1f1a;
    --accent-soft: #1f3a33;
    --accent-ink-soft: #9fe3d0;
    --danger: #ef9a8a;
    --success: #7fd3a6;
    --focus: #6fd6bd;
    --hover: rgb(228 233 230 / 7%);

    --shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-2: 0 4px 12px rgb(0 0 0 / 45%), 0 2px 4px rgb(0 0 0 / 35%);
  }
}

/* 70s: disco/psychedelic print palette (docs/DESIGN.md "Named themes"). Brown and cream
   foundations with orange, gold and turquoise stripes; functional colours are lifted for AA
   contrast on the brown surfaces. One fixed palette, independent of the OS preference. */
:root[data-theme="70s"] {
  color-scheme: dark;

  --bg: #2a2016;
  --surface: #4f3d28;
  --surface-raised: #57401e;
  --ink: #f3ebc8;
  --ink-muted: #dccfa2;
  --line: #8a6d45;
  --accent: #e8a52e;
  --accent-ink: #26190b;
  --accent-soft: #e8a52e;
  --accent-ink-soft: #26190b;
  --danger: #ffa488;
  --success: #6fe0c8;
  --focus: #4fe3cc;
  --hover: rgb(231 221 176 / 12%);

  --stripe-1: #df531b;
  --stripe-2: #e8a52e;
  --stripe-3: #169c89;
  --font-display: "Shrikhand", "Cooper Black", Georgia, serif;
  --radius-s: 0;
  --radius-m: 0;
  --radius-l: 0;
  --shadow-1: none;
  --shadow-2: 0 0 0 1px #1a130b;
}

/* Office: deliberately bland corporate admin. Pale grey/beige, navy and charcoal, square corners,
   thin rules, no shadow, plain system type. The joke is visual only. */
:root[data-theme="office"] {
  color-scheme: light;

  --bg: #e4e2dc;
  --surface: #f7f6f2;
  --surface-raised: #ffffff;
  --ink: #1f2430;
  --ink-muted: #484f5c;
  --line: #9a9a92;
  --accent: #1f3a5f;
  --accent-ink: #ffffff;
  --accent-soft: #d5dbe5;
  --accent-ink-soft: #16294a;
  --danger: #9b1c1c;
  --success: #1e5b34;
  --focus: #1f3a5f;
  --hover: rgb(31 36 48 / 8%);

  --font: Arial, Helvetica, sans-serif;
  --radius-s: 0;
  --radius-m: 0;
  --radius-l: 0;
  --shadow-1: none;
  --shadow-2: none;
}