/* Flow design tokens — generated from tokens.json. Themes: light, dark (default: light).
   Switch theme with <html data-theme="dark">. */
:root, [data-theme="light"] {
  --page: #f6f0e7;
  --page-grout: #e9dfd0;
  --surface: #fffcf7;
  --surface-sunk: #f0e6d8;
  --line: #dccdb9;
  --ink: #1d2a2f;
  --ink-soft: #56615f;
  --copper: #a14f27;
  --brass: #d9ad4c;
  --brass-deep: #8a6420;
  --flame: #f2712f;
  --ember: #bd3320;
  --cold: #2b62c4;
  --water: #0d7279;
  --water-soft: #d7ece8;
  --leaf: #2c7445;
  --on-fill: #ffffff;
  --on-warm: #24160a;
  --shadow-sm: 0 1px 0 rgba(60, 40, 20, 0.06), 0 2px 6px rgba(60, 40, 20, 0.08);
  --shadow-md: 0 2px 0 rgba(60, 40, 20, 0.05), 0 12px 24px -10px rgba(70, 40, 15, 0.28);
  --shadow-lg: 0 28px 56px -16px rgba(50, 30, 10, 0.38);
  --shadow-rim: 0 4px 0 #8a6420;
  --shadow-well: inset 0 2px 3px rgba(60, 40, 20, 0.16);
  color-scheme: light;
}
[data-theme="dark"] {
  --page: #121a1d;
  --page-grout: #1b262a;
  --surface: #1a2427;
  --surface-sunk: #0e1416;
  --line: #2e3c40;
  --ink: #eef1ec;
  --ink-soft: #a6b3b0;
  --copper: #e48d5d;
  --brass: #d6ae55;
  --brass-deep: #6b4c16;
  --flame: #ff8d4f;
  --ember: #ff7b65;
  --cold: #7fa8ff;
  --water: #4cc4c2;
  --water-soft: #163236;
  --leaf: #72c98f;
  --on-fill: #0e1416;
  --on-warm: #24160a;
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 0 rgba(0, 0, 0, 0.3), 0 14px 28px -10px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 28px 56px -16px rgba(0, 0, 0, 0.75);
  --shadow-rim: 0 4px 0 #6b4c16;
  --shadow-well: inset 0 2px 3px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pipe: 999px;
  --dur-press: 90ms;
  --dur-quick: 160ms;
  --dur-turn: 280ms;
  --dur-settle: 420ms;
  --dur-fill: 900ms;
  --dur-drip: 1600ms;
  --ease-press: cubic-bezier(0.3, 0.7, 0.4, 1);
  --ease-valve: cubic-bezier(0.34, 1.45, 0.55, 1);
  --ease-water: cubic-bezier(0.45, 0.05, 0.2, 1);
  --ease-stamp: cubic-bezier(0.2, 1.5, 0.4, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --font-display: "Rubik", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-display-family: var(--font-display);
  --type-display-size: 56px;
  --type-display-line: 60px;
  --type-display-weight: 700;
  --type-display-tracking: -0.02em;
  --type-title-family: var(--font-display);
  --type-title-size: 36px;
  --type-title-line: 42px;
  --type-title-weight: 650;
  --type-title-tracking: -0.015em;
  --type-heading-family: var(--font-display);
  --type-heading-size: 22px;
  --type-heading-line: 28px;
  --type-heading-weight: 600;
  --type-heading-tracking: -0.005em;
  --type-readout-family: var(--font-display);
  --type-readout-size: 44px;
  --type-readout-line: 48px;
  --type-readout-weight: 600;
  --type-readout-tracking: -0.02em;
  --type-label-family: var(--font-display);
  --type-label-size: 12px;
  --type-label-line: 16px;
  --type-label-weight: 600;
  --type-label-tracking: 0.08em;
  --type-lead-family: var(--font-body);
  --type-lead-size: 19px;
  --type-lead-line: 28px;
  --type-lead-weight: 400;
  --type-body-family: var(--font-body);
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-weight: 400;
  --type-small-family: var(--font-body);
  --type-small-size: 14px;
  --type-small-line: 20px;
  --type-small-weight: 400;
}
/* Type styles as utility classes (optional) */
.type-display { font-family: var(--type-display-family); font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: var(--type-display-weight); letter-spacing: var(--type-display-tracking); }
.type-title { font-family: var(--type-title-family); font-size: var(--type-title-size); line-height: var(--type-title-line); font-weight: var(--type-title-weight); letter-spacing: var(--type-title-tracking); }
.type-heading { font-family: var(--type-heading-family); font-size: var(--type-heading-size); line-height: var(--type-heading-line); font-weight: var(--type-heading-weight); letter-spacing: var(--type-heading-tracking); }
.type-readout { font-family: var(--type-readout-family); font-size: var(--type-readout-size); line-height: var(--type-readout-line); font-weight: var(--type-readout-weight); letter-spacing: var(--type-readout-tracking); }
.type-label { font-family: var(--type-label-family); font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); }
.type-lead { font-family: var(--type-lead-family); font-size: var(--type-lead-size); line-height: var(--type-lead-line); font-weight: var(--type-lead-weight); }
.type-body { font-family: var(--type-body-family); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: var(--type-body-weight); }
.type-small { font-family: var(--type-small-family); font-size: var(--type-small-size); line-height: var(--type-small-line); font-weight: var(--type-small-weight); }