/* Generated from docs/design/tokens.css and type.css. Run npm run sync-design. */
/* CoffeeCompass design tokens. Extracted verbatim from coffeecompass-design-system.html
   (Claude Design export, 20 Sep 2026, v2). Day (`light`), Night (`dark`), then scale tokens.
   Source of truth for app/src/theme/tokens.ts (T17) and the website (W1). */

:root, [data-theme="light"] {
  --surface-base: #ffffff;
  --surface-raised: #fffaf9;
  --surface-fill: #f4f0ee;
  --surface-quiet: #f4f0ee;
  --brand: #442719;
  --brand-press: #7a4a39;
  --on-brand: #fdf1ee;
  --accent: #e0919c;
  --accent-soft: #f9dde2;
  --on-accent: #2b1a14;
  --ink: #2b1a14;
  --ink-muted: #6b4a3f;
  --ink-subtle: #7b5b4f;
  --ink-inverse: #fdf1ee;
  --line: #e6dedb;
  --line-strong: #947264;
  --focus-ring: #a3374c;
  --status-open: #0a5f38;
  --status-limited: #8f4304;
  --status-closed: #575049;
  --danger: #a90f28;
  --pin-halo: #fff8f6;
  --map-canvas: #eceae4;
  --scrim: rgba(43, 26, 20, 0.55);
  --shadow-card: 0 1px 2px rgba(58, 28, 20, 0.06), 0 6px 16px rgba(58, 28, 20, 0.08);
  --shadow-sheet: 0 -2px 4px rgba(58, 28, 20, 0.05), 0 -12px 32px rgba(58, 28, 20, 0.14);
  --shadow-pin: 0 2px 4px rgba(58, 28, 20, 0.35);
}

[data-theme="dark"] {
  --surface-base: #120d0c;
  --surface-raised: #211b19;
  --surface-fill: #302825;
  --surface-quiet: #181312;
  --brand: #f2c2c7;
  --brand-press: #cf8591;
  --on-brand: #29160f;
  --accent: #e0919c;
  --accent-soft: #472a2f;
  --on-accent: #2b1a14;
  --ink: #f8e9e5;
  --ink-muted: #cfa89e;
  --ink-subtle: #b0897c;
  --ink-inverse: #29160f;
  --line: #3a2e2a;
  --line-strong: #957268;
  --focus-ring: #ffb3bd;
  --status-open: #63dd9f;
  --status-limited: #f0b45f;
  --status-closed: #a89e9c;
  --danger: #ff9b97;
  --pin-halo: #fff8f6;
  --map-canvas: #15100f;
  --scrim: rgba(9, 5, 4, 0.68);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 -2px 4px rgba(0, 0, 0, 0.5), 0 -12px 32px rgba(0, 0, 0, 0.55);
  --shadow-pin: 0 2px 6px rgba(0, 0, 0, 0.6);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;
  --size-tap: 44px;
  --size-icon: 20px;
  --size-icon-lg: 24px;
  --size-thumb: 72px;
  --size-pin: 32px;
  --font-display: Literata, Iowan Old Style, Georgia, serif;
  --font-sans: Figtree, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* CoffeeCompass type scale. Extracted verbatim from the .coco-t-* rules in coffeecompass-design-system.html
   (Claude Design export, 20 Sep 2026, v2), with the coco-t- prefix dropped. Needs the --font-* variables from tokens.css.
   Display family for Coffee Spot names and headlines, sans for interface text, mono for clock times and the Price level pips. */

.display-lg { font-family: var(--font-display); font-size: 32px; line-height: 34px; font-weight: 600; letter-spacing: -0.01em; }
.display-md { font-family: var(--font-display); font-size: 26px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.title { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 600; }
.heading { font-family: var(--font-sans); font-size: 17px; line-height: 22px; font-weight: 600; }
.body { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 400; }
.body-strong { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 600; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.caption-strong { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 600; }
.label { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.time { font-family: var(--font-mono); font-size: 15px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.price { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.04em; }

@media (prefers-color-scheme: dark) {
  :root {
  --surface-base: #120d0c;
  --surface-raised: #211b19;
  --surface-fill: #302825;
  --surface-quiet: #181312;
  --brand: #f2c2c7;
  --brand-press: #cf8591;
  --on-brand: #29160f;
  --accent: #e0919c;
  --accent-soft: #472a2f;
  --on-accent: #2b1a14;
  --ink: #f8e9e5;
  --ink-muted: #cfa89e;
  --ink-subtle: #b0897c;
  --ink-inverse: #29160f;
  --line: #3a2e2a;
  --line-strong: #957268;
  --focus-ring: #ffb3bd;
  --status-open: #63dd9f;
  --status-limited: #f0b45f;
  --status-closed: #a89e9c;
  --danger: #ff9b97;
  --pin-halo: #fff8f6;
  --map-canvas: #15100f;
  --scrim: rgba(9, 5, 4, 0.68);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 -2px 4px rgba(0, 0, 0, 0.5), 0 -12px 32px rgba(0, 0, 0, 0.55);
  --shadow-pin: 0 2px 6px rgba(0, 0, 0, 0.6);
  }
}