/* Design tokens: the single source for colour, spacing, type and size.
   Components use these variables and never hard-code a value.
   Light is the default theme. The dark theme only overrides colours. */

:root {
  color-scheme: light;

  /* Colour: surfaces and text */
  --color-bg: #f1f5f7;
  --color-surface: #ffffff;
  --color-surface-2: #e4ebef;
  --color-ink: #0e1b24;
  --color-ink-muted: #44545f;
  --color-border: #6f808a;

  /* Colour: actions */
  --color-primary: #0a4d68;
  --color-primary-pressed: #073a4f;
  --color-on-primary: #ffffff;
  --color-danger: #a31912;
  --color-danger-pressed: #7f130e;
  --color-on-danger: #ffffff;
  --color-focus: #0b63ce;

  /* Colour: status. Always paired with an icon and text, never used alone. */
  --color-normal: #0f5d38;
  --color-normal-bg: #dff3e7;
  --color-check: #754400;
  --color-check-bg: #ffefcc;
  --color-exception: #a31912;
  --color-exception-bg: #fde3e0;
  --color-info: #0a4d68;
  --color-info-bg: #dcecf3;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Type */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-data: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-reading: 2.5rem;
  --weight-normal: 400;
  --weight-bold: 700;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --border-width: 2px;
  --focus-width: 3px;

  /* Sizes: chosen large for gloved hands */
  --touch-min: 56px;
  --touch-key: 60px;
  --tabbar-height: 72px;
  --content-max: 560px;
}

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

  --color-bg: #0c151b;
  --color-surface: #15222b;
  --color-surface-2: #213440;
  --color-ink: #eef4f7;
  --color-ink-muted: #b7c6cf;
  --color-border: #7f95a2;

  --color-primary: #8ad6f0;
  --color-primary-pressed: #b3e5f6;
  --color-on-primary: #062430;
  --color-danger: #ff9d95;
  --color-danger-pressed: #ffbdb8;
  --color-on-danger: #3a0906;
  --color-focus: #ffd166;

  --color-normal: #7fe3ad;
  --color-normal-bg: #123424;
  --color-check: #ffcf70;
  --color-check-bg: #3a2a08;
  --color-exception: #ff9d95;
  --color-exception-bg: #43140f;
  --color-info: #8ad6f0;
  --color-info-bg: #12303d;
}