/*
 * Design tokens for the Label Forum client.
 *
 * The forum uses one accent colour, a warm paper background, and system fonts
 * only. There is no external font, no icon package and no CDN asset, so the
 * strict Content-Security-Policy holds and the first paint needs no network
 * round trip beyond the two same-origin stylesheets.
 *
 * Theme resolution has three states:
 *   - no data-theme attribute  -> follow the operating system;
 *   - data-theme="light"       -> force light;
 *   - data-theme="dark"        -> force dark.
 * Every colour is defined on bare :root first so a token always has a value.
 */

:root {
  color-scheme: light dark;

  /* Typeface stacks. A serif for reading, a sans for interface chrome, and a
     mono for code. All three resolve locally on every target platform. */
  --font-reading:
    ui-serif, "Iowan Old Style", "Source Serif 4", Charter, Georgia,
    "Times New Roman", serif;
  --font-interface:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo,
    Consolas, monospace;

  /* Type scale. Fluid between a narrow phone and a wide desktop so long
     threads stay readable without a layout shift at any breakpoint. */
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  --text-xl: clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Spacing scale, 4px based. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-strong-width: 2px;

  --measure: 68ch;
  --shell-width: 1200px;
  --shell-narrow: 780px;

  --duration-fast: 90ms;
  --duration-base: 160ms;
  --easing: cubic-bezier(0.2, 0, 0.2, 1);

  --z-header: 40;
  --z-overlay: 60;
  --z-toast: 80;
  --z-skip: 100;

  /* Light palette. Warm paper rather than pure white, so long reading sessions
     stay comfortable and the accent keeps its weight. */
  --paper: #f7f6f3;
  --surface: #ffffff;
  --surface-sunken: #f1efeb;
  --surface-raised: #ffffff;
  --surface-inverse: #1b1b1e;

  --text-primary: #1a1a1c;
  --text-secondary: #4c4c53;
  /* Measured against the darkest light-mode background, --surface-sunken,
     where it reaches 5.18:1. The previous value measured 4.33:1 there and
     failed WCAG 2.2 AA for body text. */
  --text-muted: #63636c;
  --text-inverse: #f7f6f3;
  --text-on-accent: #ffffff;

  --line: #e0ddd6;
  --line-strong: #c8c4ba;
  --line-accent: #33357a;

  --accent: #33357a;
  --accent-hover: #262861;
  --accent-soft: #ecedf7;
  --accent-border: #c5c7e4;

  --positive: #1f6b46;
  --positive-soft: #e6f2ea;
  --caution: #8a5b12;
  --caution-soft: #fbf0dd;
  --critical: #a12b2b;
  --critical-soft: #fbeaea;
  --info: #1f5673;
  --info-soft: #e6f0f5;

  --shadow-sm: 0 1px 2px rgb(26 26 28 / 6%);
  --shadow-md: 0 2px 6px rgb(26 26 28 / 8%), 0 1px 2px rgb(26 26 28 / 4%);
  --shadow-lg: 0 8px 28px rgb(26 26 28 / 12%), 0 2px 6px rgb(26 26 28 / 6%);

  --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
  --selection-bg: #d9dbf0;
  --selection-text: #1a1a1c;
}

/* System dark, only when the reader has not made an explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121214;
    --surface: #191a1d;
    --surface-sunken: #0e0e10;
    --surface-raised: #202126;
    --surface-inverse: #f2f1ee;

    --text-primary: #ececeb;
    --text-secondary: #b6b6bd;
    --text-muted: #8b8b94;
    --text-inverse: #191a1d;
    --text-on-accent: #12121a;

    --line: #2c2d32;
    --line-strong: #414248;
    --line-accent: #a7a4ff;

    --accent: #a7a4ff;
    --accent-hover: #c0beff;
    --accent-soft: #21223a;
    --accent-border: #3b3c60;

    --positive: #6fce9d;
    --positive-soft: #16281f;
    --caution: #e0b567;
    --caution-soft: #2a2213;
    --critical: #f08a8a;
    --critical-soft: #2c1818;
    --info: #7fc0e0;
    --info-soft: #142430;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-md: 0 2px 6px rgb(0 0 0 / 45%), 0 1px 2px rgb(0 0 0 / 30%);
    --shadow-lg: 0 10px 32px rgb(0 0 0 / 55%), 0 2px 8px rgb(0 0 0 / 35%);

    --focus-ring: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
    --selection-bg: #33355e;
    --selection-text: #ececeb;
  }
}

/* Explicit dark choice wins in both directions. */
:root[data-theme="dark"] {
  --paper: #121214;
  --surface: #191a1d;
  --surface-sunken: #0e0e10;
  --surface-raised: #202126;
  --surface-inverse: #f2f1ee;

  --text-primary: #ececeb;
  --text-secondary: #b6b6bd;
  --text-muted: #8b8b94;
  --text-inverse: #191a1d;
  --text-on-accent: #12121a;

  --line: #2c2d32;
  --line-strong: #414248;
  --line-accent: #a7a4ff;

  --accent: #a7a4ff;
  --accent-hover: #c0beff;
  --accent-soft: #21223a;
  --accent-border: #3b3c60;

  --positive: #6fce9d;
  --positive-soft: #16281f;
  --caution: #e0b567;
  --caution-soft: #2a2213;
  --critical: #f08a8a;
  --critical-soft: #2c1818;
  --info: #7fc0e0;
  --info-soft: #142430;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow-md: 0 2px 6px rgb(0 0 0 / 45%), 0 1px 2px rgb(0 0 0 / 30%);
  --shadow-lg: 0 10px 32px rgb(0 0 0 / 55%), 0 2px 8px rgb(0 0 0 / 35%);

  --selection-bg: #33355e;
  --selection-text: #ececeb;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}