/* Design tokens. The org accent (--brand, --on-brand, --brand-soft) comes from /brand.css. */
:root {
  --brand: #1f7a6d;
  --on-brand: #ffffff;
  --brand-soft: #e3f0ed;

  --bg: #f4f5f3;
  --surface: #ffffff;
  --surface-2: #f0f2ef;
  --surface-3: #e7eae6;
  --ink: #16201e;
  --ink-2: #3d4a47;
  --muted: #66736f;
  --line: #dfe4e0;
  --line-strong: #c8d0cb;
  --ok: #1d7f47;
  --ok-soft: #e2f3e8;
  --bad: #b8342b;
  --bad-soft: #fbe7e4;
  --warn: #9a6512;
  --warn-soft: #fbf0dc;
  --info: #2c64a8;
  --info-soft: #e5eef9;
  --coupon: #fffdf7;
  --coupon-line: #e8b9b4;
  --coupon-ink: #9c2f28;
  --heat-0: #eef1ee;
  --heat-1: #cfe6dd;
  --heat-2: #9fd0bd;
  --heat-3: #5fae93;
  --heat-4: #2b806a;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-md: 15px;
  --fs-lg: 17.5px;
  --fs-xl: 21px;
  --fs-2xl: 27px;
  --fs-3xl: 36px;
  --lh: 1.55;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --shadow-1: 0 1px 2px rgb(20 40 35 / 0.06), 0 1px 1px rgb(20 40 35 / 0.04);
  --shadow-2: 0 6px 24px rgb(20 40 35 / 0.09), 0 2px 6px rgb(20 40 35 / 0.05);
  --focus: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
  --sidebar-w: 248px;
  --content-w: 1080px;
  --topbar-h: 60px;
  --tabbar-h: calc(62px + env(safe-area-inset-bottom));
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101615;
    --surface: #172020;
    --surface-2: #1d2827;
    --surface-3: #25312f;
    --ink: #e6eeeb;
    --ink-2: #c3cfcb;
    --muted: #93a39f;
    --line: #293432;
    --line-strong: #37443f;
    --ok: #57c285;
    --ok-soft: #173024;
    --bad: #ef7a6c;
    --bad-soft: #3a211d;
    --warn: #e2ad57;
    --warn-soft: #362a15;
    --info: #7fb1ee;
    --info-soft: #1a2a3d;
    --coupon: #1b2322;
    --coupon-line: #6b3a36;
    --coupon-ink: #f19a8f;
    --heat-0: #1f2927;
    --heat-1: #1d3a33;
    --heat-2: #1f5647;
    --heat-3: #2b7a63;
    --heat-4: #45a584;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-2: 0 8px 28px rgb(0 0 0 / 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #101615;
  --surface: #172020;
  --surface-2: #1d2827;
  --surface-3: #25312f;
  --ink: #e6eeeb;
  --ink-2: #c3cfcb;
  --muted: #93a39f;
  --line: #293432;
  --line-strong: #37443f;
  --ok: #57c285;
  --ok-soft: #173024;
  --bad: #ef7a6c;
  --bad-soft: #3a211d;
  --warn: #e2ad57;
  --warn-soft: #362a15;
  --info: #7fb1ee;
  --info-soft: #1a2a3d;
  --coupon: #1b2322;
  --coupon-line: #6b3a36;
  --coupon-ink: #f19a8f;
  --heat-0: #1f2927;
  --heat-1: #1d3a33;
  --heat-2: #1f5647;
  --heat-3: #2b7a63;
  --heat-4: #45a584;
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-2: 0 8px 28px rgb(0 0 0 / 0.45);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}