/* Hallmark · macrostructure: Workbench · tone: technical · anchor hue: cobalt
 * genre: modern-minimal · theme: Cobalt · nav: N9 · footer: Ft2
 * audience: public · use: create an address and read temporary email
 * enrichment: none; live application, no simulated demo or browser chrome
 * adaptation: functional address/inbox/reader replaces screenshot tour; no marketing command palette
 */
:root {
  color-scheme: light;
  --color-paper: oklch(98% 0.005 250);
  --color-surface: oklch(99.5% 0.002 250);
  --color-paper-2: oklch(95.5% 0.009 250);
  --color-paper-3: oklch(91.5% 0.013 250);
  --color-ink: oklch(24% 0.02 258);
  --color-ink-2: oklch(38% 0.018 257);
  --color-muted: oklch(47% 0.018 257);
  --color-rule: oklch(86% 0.014 250);
  --color-control-rule: oklch(59% 0.018 250);
  --color-accent: oklch(49% 0.2 262);
  --color-accent-ink: var(--color-surface);
  --color-accent-soft: oklch(95% 0.022 262);
  --color-focus: oklch(49% 0.2 262);
  --color-error: oklch(46% 0.18 25);
  --color-error-soft: oklch(96% 0.015 25);
  --color-graphite: oklch(23% 0.018 258);
  --color-dark-ink: oklch(97% 0.005 250);
  --color-dark-muted: oklch(78% 0.018 250);
  --color-dark-rule: oklch(45% 0.02 258);
  --color-dark-control: oklch(65% 0.018 250);
  --color-dark-hover: oklch(30% 0.023 258);
  --color-dark-focus: oklch(82% 0.09 250);
  --color-dark-error: oklch(85% 0.075 25);
  --color-transparent: transparent;
  --color-backdrop: oklch(20% 0.02 258 / 0.5);
  --label-cobalt: oklch(49% 0.2 262);
  --label-slate: oklch(52% 0.03 258);
  --label-moss: oklch(48% 0.11 148);
  --label-amber: oklch(60% 0.13 75);
  --label-rose: oklch(54% 0.16 15);
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-display: clamp(2.125rem, 3.6vw, 3.25rem);
  --text-address: clamp(1rem, 1.65vw, 1.375rem);
  --text-at: clamp(5rem, 8vw, 7rem);
  --text-error: 6rem;
  --page-max: 76rem;
  --page-gutter: max(clamp(1rem, 4vw, 3rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --control-height: 2.875rem;
  --radius-control: 0.375rem;
  --radius-panel: 0.625rem;
  --rule-width: 1px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 200ms;
  --dur-feedback: 300ms;
  --z-content: 0;
  --z-skip: 10;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-paper: oklch(18% 0.018 258);
  --color-surface: oklch(21% 0.02 258);
  --color-paper-2: oklch(25% 0.022 258);
  --color-paper-3: oklch(30% 0.024 258);
  --color-ink: oklch(95% 0.006 250);
  --color-ink-2: oklch(84% 0.012 250);
  --color-muted: oklch(68% 0.016 250);
  --color-rule: oklch(32% 0.022 258);
  --color-control-rule: oklch(48% 0.022 258);
  --color-accent: oklch(72% 0.14 258);
  --color-accent-ink: oklch(18% 0.018 258);
  --color-accent-soft: oklch(27% 0.04 258);
  --color-focus: oklch(78% 0.13 258);
  --color-error: oklch(74% 0.14 25);
  --color-error-soft: oklch(26% 0.05 25);
  --color-graphite: oklch(27% 0.022 258);
  --color-dark-ink: oklch(95% 0.006 250);
  --color-dark-muted: oklch(72% 0.016 250);
  --color-dark-rule: oklch(38% 0.022 258);
  --color-dark-control: oklch(55% 0.022 258);
  --color-dark-hover: oklch(34% 0.026 258);
  --color-dark-focus: oklch(84% 0.1 250);
  --color-dark-error: oklch(78% 0.12 25);
  --color-backdrop: oklch(10% 0.02 258 / 0.62);
  --label-cobalt: oklch(72% 0.14 258);
  --label-slate: oklch(72% 0.03 258);
  --label-moss: oklch(74% 0.12 148);
  --label-amber: oklch(78% 0.13 75);
  --label-rose: oklch(74% 0.14 15);
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}