/* Design tokens — every colour, size and space in the app comes from here.
   A new skin is a change to this file only. */
:root {
  /* Colour */
  --color-bg: #f4f2ec;
  --color-surface: #ffffff;
  --color-ink: #080807;
  --color-ink-soft: #3d3b36;
  --color-line: #c9c5b8;
  --color-brand: #080807;
  --color-on-brand: #ffffff;
  --color-accent: #c9a24a;
  --color-accent-ink: #6b5210;
  --color-urgent: #b3261e;
  --color-urgent-fill: #b3261e; /* filled red elements with white text */
  --color-urgent-bg: #fdecea;
  --color-ok: #1e6b3a;
  --color-ok-bg: #e6f4ea;
  --color-warn-bg: #fff4d6;
  --color-backdrop: rgba(8, 8, 7, 0.55);
  /* Top bar and main buttons (so the dark theme can use gold without recolouring everything) */
  --color-topbar-bg: #080807;
  --color-topbar-ink: #ffffff;
  --color-primary-bg: #080807;
  --color-primary-ink: #ffffff;

  /* Type */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --weight-normal: 400;
  --weight-strong: 650;
  --line-height: 1.35;

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

  /* Shape and size */
  --radius: 10px;
  --tap: 48px;
  --border: 1.5px solid var(--color-line);
  --content-max: 720px;
  --topbar-height: 56px;
  --tabbar-height: 60px;
}

/* Dark theme: follows the phone unless the person chose one by hand (data-theme on <html>). */
:root[data-theme="dark"] {
  --color-bg: #121211;
  --color-surface: #1c1b19;
  --color-ink: #f2efe6;
  --color-ink-soft: #bdb7a8;
  --color-line: #3d3a34;
  --color-brand: #c9a24a;
  --color-on-brand: #080807;
  --color-accent: #d4af5a;
  --color-accent-ink: #e2c070;
  --color-urgent: #e0574d;
  --color-urgent-fill: #a8281f;
  --color-urgent-bg: #3b1f1c;
  --color-ok: #7ad99a;
  --color-ok-bg: #1d3326;
  --color-warn-bg: #352c14;
  --color-backdrop: rgba(0, 0, 0, 0.7);
  --color-topbar-bg: #080807;
  --color-topbar-ink: #f2efe6;
  --color-primary-bg: #c9a24a;
  --color-primary-ink: #080807;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #121211;
    --color-surface: #1c1b19;
    --color-ink: #f2efe6;
    --color-ink-soft: #bdb7a8;
    --color-line: #3d3a34;
    --color-brand: #c9a24a;
    --color-on-brand: #080807;
    --color-accent: #d4af5a;
    --color-accent-ink: #e2c070;
    --color-urgent: #e0574d;
    --color-urgent-fill: #a8281f;
    --color-urgent-bg: #3b1f1c;
    --color-ok: #7ad99a;
    --color-ok-bg: #1d3326;
    --color-warn-bg: #352c14;
    --color-backdrop: rgba(0, 0, 0, 0.7);
    --color-topbar-bg: #080807;
    --color-topbar-ink: #f2efe6;
    --color-primary-bg: #c9a24a;
    --color-primary-ink: #080807;
  }
}