/*
 * Oblik design tokens. Source of truth: design/Oblik-Design-System.md (front matter: colors, colors-dark).
 * The screens in design/ui-round-2/ use these exact variable names, so a template can be copied from a
 * screen without renaming anything. Do not write a colour anywhere else: templates and CSS reference var(--x) only.
 *
 * Mapping to the design-system names:
 *   --canvas = canvas, --soft = canvas-soft, --softer = canvas-softer, --pressed = surface-pressed,
 *   --line = hairline on canvas (equals surface-pressed), --warn* = warning*, --band = black band (stat tiles).
 *
 * Theme: follows the OS by default; <html data-theme="light|dark"> overrides it (the manual switch).
 */
:root {
  color-scheme: light dark;

  /* fonts: self-hosted Manrope 700 (display) and Golos Text 400/500 (body), see T0.6 */
  --font-display: Manrope, "Golos Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Golos Text", Inter, system-ui, sans-serif;

  /* radii */
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* spacing (4 px base) */
  --space-xxs: 4px;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  /* minimum touch target */
  --target: 44px;

  /* the dim layer behind dialogs, sheets and side panels; the same in both themes (ui-round-2 boards) */
  --scrim: rgba(0, 0, 0, 0.6);
}

/* light (default) */
:root,
:root[data-theme="light"] {
  --canvas: #ffffff;
  --soft: #efefef;
  --softer: #f3f3f3;
  --line: #e2e2e2;
  --pressed: #e2e2e2;
  --ink: #000000;
  --body: #5e5e5e;
  --hint: #6b6b6b;
  --mute: #afafaf;
  --hairline-mid: #4b4b4b;
  --link: #0000ee;
  --primary: #000000;
  --on-primary: #ffffff;
  --on-dark: #ffffff;
  --black-elevated: #282828;
  --band: #000000;
  --band-text: #ffffff;
  --danger: #b3261e;
  --danger-soft: #fbe4e1;
  --on-danger-soft: #7a1712;
  --warn: #8a5a00;
  --warn-soft: #fbefd2;
  --on-warn-soft: #6b4200;
  --success: #1b7a3d;
  --success-soft: #e2f3e8;
  --on-success-soft: #124f28;
}

/* dark: follows the OS unless the user chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0e0e0e;
    --soft: #1f1f1f;
    --softer: #262626;
    --line: #333333;
    --pressed: #333333;
    --ink: #ffffff;
    --body: #b4b4b4;
    --hint: #9a9a9a;
    --mute: #6e6e6e;
    --hairline-mid: #a3a3a3;
    --link: #8ab4ff;
    --primary: #ffffff;
    --on-primary: #000000;
    --on-dark: #000000;
    --black-elevated: #2a2a2a;
    --band: #1f1f1f;
    --band-text: #ffffff;
    --danger: #ff8a80;
    --danger-soft: #3a1714;
    --on-danger-soft: #ffc9c4;
    --warn: #f2cb7a;
    --warn-soft: #392d11;
    --on-warn-soft: #f6dc9f;
    --success: #6fd08c;
    --success-soft: #12301c;
    --on-success-soft: #b4ebc4;
  }
}

/* dark: manual choice */
:root[data-theme="dark"] {
  --canvas: #0e0e0e;
  --soft: #1f1f1f;
  --softer: #262626;
  --line: #333333;
  --pressed: #333333;
  --ink: #ffffff;
  --body: #b4b4b4;
  --hint: #9a9a9a;
  --mute: #6e6e6e;
  --hairline-mid: #a3a3a3;
  --link: #8ab4ff;
  --primary: #ffffff;
  --on-primary: #000000;
  --on-dark: #000000;
  --black-elevated: #2a2a2a;
  --band: #1f1f1f;
  --band-text: #ffffff;
  --danger: #ff8a80;
  --danger-soft: #3a1714;
  --on-danger-soft: #ffc9c4;
  --warn: #f2cb7a;
  --warn-soft: #392d11;
  --on-warn-soft: #f6dc9f;
  --success: #6fd08c;
  --success-soft: #12301c;
  --on-success-soft: #b4ebc4;
}