/* Keel UI tokens (design/keel-ui/README.md). Every colour, size and duration the app uses comes from
   here; components never write a raw value. Light by default, dark by the system or data-theme. */
:root {
  /* colour: neutrals */
  --bg: #f6f6f3; --surface: #ffffff; --surface-2: #f0efea; --surface-3: #e8e6df; --line: #e4e2da; --line-strong: #cfccc2;
  --text: #1c1c1a; --muted: #6b6a63; --faint: #75736b; --on-accent: #ffffff;
  /* colour: one accent, and four meanings; each has a soft background for pills and banners */
  --accent: #2f5bd3; --accent-soft: #e6ecfb; --accent-press: #2449b0;
  --good: #1f7a45; --good-soft: #e3f3e9;
  --warn: #9a5c00; --warn-soft: #fbf0dc;
  --bad: #b8352a; --bad-soft: #f9e3e0;
  --info: #5b5f97; --info-soft: #ecedf8;
  --scrim: rgba(20, 20, 18, .38); --focus: #2f5bd3;

  /* type: one family, five sizes, three weights */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, monospace;
  --text-xs: 12px; --text-sm: 13px; --text-md: 15px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 30px;
  --leading: 1.45; --leading-tight: 1.2;
  --weight-regular: 400; --weight-medium: 600; --weight-bold: 700;

  /* space: a 4 px scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --gutter: 16px; --page-max: 560px; --tap: 44px; /* the smallest thing a thumb has to hit */

  /* shape and depth */
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-full: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 16px rgba(0, 0, 0, .04);
  --shadow-2: 0 8px 32px rgba(0, 0, 0, .14);

  /* motion: short, and none when the phone asks for less */
  --t-fast: 120ms; --t-base: 200ms; --ease: cubic-bezier(.2, .7, .2, 1);

  /* layers */
  --z-header: 5; --z-tabs: 6; --z-banner: 7; --z-sheet: 20; --z-toast: 30;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111110; --surface: #1b1b19; --surface-2: #232320; --surface-3: #2c2c29; --line: #2e2d2a; --line-strong: #45443f;
    --text: #ecebe6; --muted: #a09e96; --faint: #8a887f; --on-accent: #0f1420;
    --accent: #7d9cf0; --accent-soft: #1e2a4a; --accent-press: #9bb3f4;
    --good: #5cc98a; --good-soft: #17301f; --warn: #e3a94a; --warn-soft: #33270f; --bad: #ef7a6b; --bad-soft: #3a1c18;
    --info: #a9acdf; --info-soft: #24253a; --scrim: rgba(0, 0, 0, .55); --focus: #9bb3f4;
    --shadow-1: none; --shadow-2: 0 8px 32px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111110; --surface: #1b1b19; --surface-2: #232320; --surface-3: #2c2c29; --line: #2e2d2a; --line-strong: #45443f;
  --text: #ecebe6; --muted: #a09e96; --faint: #8a887f; --on-accent: #0f1420;
  --accent: #7d9cf0; --accent-soft: #1e2a4a; --accent-press: #9bb3f4;
  --good: #5cc98a; --good-soft: #17301f; --warn: #e3a94a; --warn-soft: #33270f; --bad: #ef7a6b; --bad-soft: #3a1c18;
  --info: #a9acdf; --info-soft: #24253a; --scrim: rgba(0, 0, 0, .55); --focus: #9bb3f4;
  --shadow-1: none; --shadow-2: 0 8px 32px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; }
}