/* Countaline design tokens v1.0 (UI-01). Every page uses these; no colour, size or radius outside this file.
   Contrast (UI-02) checked for text tokens on --bg and --surface in both themes: body >= 7:1, muted >= 4.5:1,
   control borders >= 3:1. */
:root {
  color-scheme: light;
  --bg: #faf8f4;
  --surface: #ffffff;
  --surface-2: #f2efe8;
  --text: #1c2433;
  --text-muted: #4a5568;
  --border: #dcd6cb;          /* decorative lines only */
  --border-control: #7d786e;  /* inputs and buttons, >= 3:1 */
  --primary: #1f4e79;
  --primary-hover: #173d5f;
  --on-primary: #ffffff;
  --success: #1e6b47;
  --success-bg: #e6f2eb;
  --warning: #8a5a00;
  --warning-bg: #fbf1dc;
  --danger: #a3261c;
  --danger-bg: #fbe9e7;
  --focus: #1f4e79;

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-num: var(--font-ui);

  --fs-sm: 0.9375rem;   /* 15px, small print only */
  --fs-base: 1.0625rem; /* 17px body (UI-03) */
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;
  --fs-2xl: 2.125rem;
  --fs-3xl: clamp(2.125rem, 1.4rem + 3vw, 3.25rem);
  --lh-body: 1.6;
  --lh-tight: 1.2;
  --measure: 68ch;

  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgb(28 36 51 / 0.06), 0 4px 16px rgb(28 36 51 / 0.06);
  --tap: 44px;           /* minimum tap target (UI-04) */
  --container: 1120px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12161d;
    --surface: #1a202a;
    --surface-2: #222a36;
    --text: #e8e6e1;
    --text-muted: #a8b0bc;
    --border: #2c3442;
    --border-control: #6f7a8b;
    --primary: #7fb0e0;
    --primary-hover: #9cc3ea;
    --on-primary: #0e1a28;
    --success: #6cc59a;
    --success-bg: #183126;
    --warning: #e7b75c;
    --warning-bg: #33280f;
    --danger: #f08a80;
    --danger-bg: #3a1c19;
    --focus: #9cc3ea;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12161d;
  --surface: #1a202a;
  --surface-2: #222a36;
  --text: #e8e6e1;
  --text-muted: #a8b0bc;
  --border: #2c3442;
  --border-control: #6f7a8b;
  --primary: #7fb0e0;
  --primary-hover: #9cc3ea;
  --on-primary: #0e1a28;
  --success: #6cc59a;
  --success-bg: #183126;
  --warning: #e7b75c;
  --warning-bg: #33280f;
  --danger: #f08a80;
  --danger-bg: #3a1c19;
  --focus: #9cc3ea;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 16px rgb(0 0 0 / 0.25);
}