/* Design tokens: the only place colours, sizes, spaces, corners and timings are set.
   Values from docs/design-guidelines.md, section 3. Components use these variables only. */

:root {
  /* Light only, on every device, even when the phone is set to dark (decision D10, changed 5 November 2026). */
  color-scheme: light;

  --color-bg: #ffffff;
  --color-bg-grouped: #f4f5f7;
  --color-text: #1a1c1f;
  --color-text-secondary: #5c6370;
  --color-border: #e3e6ea;
  --color-border-control: #80868f;
  --color-accent: #0b6e79;
  --color-accent-tint: #e6f1f2;
  --color-on-accent: #ffffff;
  --color-success: #1e7a3c;
  --color-warning: #8a5a00;
  --color-danger: #b3261e;
  --color-info: var(--color-accent);

  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --text-display: 2.125rem;
  --text-title-1: 1.75rem;
  --text-title-2: 1.375rem;
  --text-headline: 1.0625rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-caption: 0.8125rem;
  --weight-regular: 400;
  --weight-semibold: 600;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --margin-side: var(--space-4);
  --width-reading: 40rem;
  --width-page: 64rem;
  --size-touch: 2.75rem;
  --size-main-button: 3rem;
  --size-icon: 1.25rem;

  --radius-control: 0.5rem;
  --radius-surface: 0.875rem;
  --shadow-card: 0 1px 2px rgb(16 24 40 / 0.05), 0 4px 12px rgb(16 24 40 / 0.06);
  --size-icon-tile: 2.5rem;
  /* Floating surfaces (dialogs) and the shade behind them (section 3.4). */
  --shadow-float: 0 8px 28px rgb(16 24 40 / 0.18);
  --color-scrim: rgb(16 24 40 / 0.45);
  /* The main places: bottom bar on phones, side bar from tablets (section 4.1). */
  --size-tab-bar: 3.5rem;
  --width-side-bar: 13rem;
  --size-icon-nav: 1.5rem;
  --focus-ring: 2px;
  --focus-gap: 2px;

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);
}

@media (min-width: 48rem) {
  :root { --margin-side: var(--space-5); }
}

@media (min-width: 64rem) {
  :root { --margin-side: var(--space-6); }
}