/* Omnistop design tokens: "Quiet Ledger". The one place for colours, type, corners and spacing. Used by public/index.html (the app),
   public/g.html (the guest page), src/pages.js (pricing, help) and web/src/styles.css (route mode, which builds this file in so it works offline).
   Neutral warm grays and one teal accent. Red, amber and green are for real status only, never decoration. See docs/UI-POLISH-TODO.md section 1. */
@font-face { font-family: "Inter"; src: url("/vendor/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* type: 6 sizes and 3 weights */
  --font: Inter, -apple-system, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto, sans-serif;
  --fs-hero: 34px; --lh-hero: 40px;
  --fs-title: 22px; --lh-title: 28px;
  --fs-section: 17px; --lh-section: 24px;
  --fs-body: 16px; --lh-body: 24px;
  --fs-small: 14px; --lh-small: 20px;
  --fs-caption: 12px; --lh-caption: 16px;
  --w-regular: 400; --w-medium: 500; --w-semi: 600;
  /* corners */
  --r-control: 8px; --r-card: 12px; --r-sheet: 16px; --r-badge: 999px;
  /* spacing: 4 px base; only these */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px;
  /* sizes fingers need */
  --tap: 44px; --tap-route: 48px;

  /* light (contrast measured on the page background / on white) */
  --bg: #F6F6F3;
  --surface: #FFFFFF;
  --elevated: #FFFFFF;
  --fill: #EEEEEA;                /* a quiet block: tabs' track, skeletons, hover */
  --text: #1C1C1A;                /* 15.8 / 17.1 */
  --text-2: #5E5E58;              /* 6.0 / 6.5 */
  --line: #DEDED8;                /* decorative dividers only */
  --control-border: #8A8A82;      /* 3.2 / 3.5: controls need 3:1 */
  --accent: #0F766E;              /* 5.1 / 5.5 */
  --accent-hover: #115E59;
  --accent-ink: #FFFFFF;          /* 5.5 on accent */
  --accent-tint: #E6F2F0;
  --success: #15803D;
  --warning: #B45309;
  --danger: #B91C1C;              /* 6.0 / 6.5 */
  --pill-danger: #B42318;         /* status text on its own tint, 12 px */
  --pill-warning: #93370D;
  --pill-success: #166534;
  --badge: #B91C1C; --badge-ink: #FFFFFF;
  --chart-1: #9FD6CF; --chart-2: #0F766E;
  --shadow-sheet: 0 8px 24px -8px rgba(28, 28, 26, .18);      /* sheets and popovers only */
  --scrim: rgba(28, 28, 26, .45);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111110; --surface: #1B1B19; --elevated: #252522; --fill: #252522;
    --text: #EDEDE9; --text-2: #A6A69F; --line: #30302D; --control-border: #78786F;
    --accent: #2DD4BF; --accent-hover: #5EEAD4; --accent-ink: #111110; --accent-tint: #12302C;
    --success: #4ADE80; --warning: #FBBF24; --danger: #F87171;
    --pill-danger: #F87171; --pill-warning: #FBBF24; --pill-success: #4ADE80;
    --badge: #F87171; --badge-ink: #111110;
    --chart-1: #1F5F58; --chart-2: #2DD4BF;
    --shadow-sheet: none; --scrim: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111110; --surface: #1B1B19; --elevated: #252522; --fill: #252522;
  --text: #EDEDE9; --text-2: #A6A69F; --line: #30302D; --control-border: #78786F;
  --accent: #2DD4BF; --accent-hover: #5EEAD4; --accent-ink: #111110; --accent-tint: #12302C;
  --success: #4ADE80; --warning: #FBBF24; --danger: #F87171;
  --pill-danger: #F87171; --pill-warning: #FBBF24; --pill-success: #4ADE80;
  --badge: #F87171; --badge-ink: #111110;
  --chart-1: #1F5F58; --chart-2: #2DD4BF;
  --shadow-sheet: none; --scrim: rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* No movement for people who've asked for none. Skeletons still appear after their second; nothing slides or ticks. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}