/* Gleam design tokens — generated from tokens.json. Themes: light, dark (default: light).
   Switch theme with <html data-theme="dark">. */
:root, [data-theme="light"] {
  --page: #f2f6f5;
  --page-arc: #dae6e3;
  --porcelain: #ffffff;
  --porcelain-sunk: #eaf1f0;
  --line: #cfdedb;
  --ink: #0e2b33;
  --ink-soft: #48656d;
  --primary: #0b4f5c;
  --on-primary: #ffffff;
  --mint: #cdeee3;
  --mint-strong: #11745d;
  --ice: #d8eaf7;
  --blush: #f8e1dc;
  --coral: #ad3528;
  --on-coral: #ffffff;
  --gold: #94600b;
  --focus: #2667c9;
  --scrim: rgba(14, 43, 51, 0.42);
  --shadow-sm: 0 1px 2px rgba(14, 43, 51, 0.06), 0 3px 8px -2px rgba(14, 43, 51, 0.08);
  --shadow-md: 0 2px 4px rgba(14, 43, 51, 0.05), 0 12px 28px -8px rgba(14, 43, 51, 0.16);
  --shadow-lg: 0 4px 10px rgba(14, 43, 51, 0.05), 0 28px 56px -16px rgba(14, 43, 51, 0.26);
  --shadow-key: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 3px 0 #c3d5d1, 0 6px 14px -4px rgba(14, 43, 51, 0.2);
  --shadow-key-press: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 0 0 #c3d5d1, 0 1px 3px rgba(14, 43, 51, 0.16);
  --shadow-inset: inset 0 2px 4px rgba(14, 43, 51, 0.08);
  color-scheme: light;
}
[data-theme="dark"] {
  --page: #091b21;
  --page-arc: #123139;
  --porcelain: #10272f;
  --porcelain-sunk: #0b2026;
  --line: #28474f;
  --ink: #e8f3f1;
  --ink-soft: #a2bfc1;
  --primary: #8be3c8;
  --on-primary: #06272c;
  --mint: #17463f;
  --mint-strong: #6fdcb9;
  --ice: #173a50;
  --blush: #47292f;
  --coral: #ff917e;
  --on-coral: #2b0c07;
  --gold: #f0c362;
  --focus: #8cc4ff;
  --scrim: rgba(2, 10, 14, 0.7);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 3px 8px -2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px -8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.4), 0 28px 56px -16px rgba(0, 0, 0, 0.7);
  --shadow-key: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 3px 0 #04141a, 0 6px 14px -4px rgba(0, 0, 0, 0.6);
  --shadow-key-press: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 0 0 #04141a, 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  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: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  --dur-press: 90ms;
  --dur-release: 240ms;
  --dur-hover: 220ms;
  --dur-glide: 380ms;
  --dur-glint: 720ms;
  --dur-arc: 900ms;
  --dur-breath: 10000ms;
  --ease-enamel: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ease-press: cubic-bezier(0.3, 0, 0.6, 1);
  --ease-release: cubic-bezier(0.2, 1.3, 0.42, 1);
  --ease-breath: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-exit: cubic-bezier(0.5, 0, 0.75, 0.2);
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --type-display-family: var(--font-sans);
  --type-display-size: 56px;
  --type-display-line: 60px;
  --type-display-weight: 800;
  --type-display-tracking: -0.025em;
  --type-title-family: var(--font-sans);
  --type-title-size: 36px;
  --type-title-line: 42px;
  --type-title-weight: 750;
  --type-title-tracking: -0.02em;
  --type-heading-family: var(--font-sans);
  --type-heading-size: 20px;
  --type-heading-line: 28px;
  --type-heading-weight: 700;
  --type-heading-tracking: -0.01em;
  --type-accent-family: var(--font-serif);
  --type-accent-size: 40px;
  --type-accent-line: 44px;
  --type-accent-weight: 500;
  --type-numeral-family: var(--font-sans);
  --type-numeral-size: 28px;
  --type-numeral-line: 32px;
  --type-numeral-weight: 750;
  --type-numeral-tracking: -0.02em;
  --type-body-family: var(--font-sans);
  --type-body-size: 16px;
  --type-body-line: 26px;
  --type-body-weight: 400;
  --type-small-family: var(--font-sans);
  --type-small-size: 14px;
  --type-small-line: 21px;
  --type-small-weight: 500;
  --type-label-family: var(--font-sans);
  --type-label-size: 12px;
  --type-label-line: 16px;
  --type-label-weight: 700;
  --type-label-tracking: 0.09em;
}
/* 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-accent { font-family: var(--type-accent-family); font-size: var(--type-accent-size); line-height: var(--type-accent-line); font-weight: var(--type-accent-weight); }
.type-numeral { font-family: var(--type-numeral-family); font-size: var(--type-numeral-size); line-height: var(--type-numeral-line); font-weight: var(--type-numeral-weight); letter-spacing: var(--type-numeral-tracking); }
.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); }
.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); }