/* Hallmark · macrostructure: Workbench · genre: modern-minimal · theme: Cobalt-influenced existing system · tone: technical-playful · anchor hue: cobalt · contrast: pass (40–41) · nav: N1b · footer: Ft1 · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50–57) */
:root {
  color-scheme: light dark;
  --page: oklch(97.5% 0.012 85);
  --surface: oklch(99% 0.005 85);
  --surface-raised: oklch(99.5% 0.003 250);
  --surface-subtle: oklch(96.5% 0.012 235);
  --text: oklch(27% 0.09 257);
  --text-muted: oklch(51% 0.045 257);
  --border: oklch(88% 0.012 85);
  --border-strong: oklch(84% 0.028 245);
  --accent: oklch(56% 0.21 255);
  --accent-hover: oklch(48% 0.2 255);
  --accent-soft: oklch(95% 0.03 255);
  --accent-contrast: oklch(99% 0.004 250);
  --teal: oklch(54% 0.115 183);
  --teal-bright: oklch(65% 0.14 178);
  --teal-soft: oklch(96% 0.04 177);
  --success: oklch(51% 0.13 158);
  --success-soft: oklch(96% 0.035 158);
  --success-border: oklch(66% 0.13 158);
  --danger: oklch(48% 0.16 24);
  --danger-soft: oklch(96% 0.03 24);
  --danger-border: oklch(65% 0.12 24);
  --focus: oklch(54% 0.22 255);
  --google-blue: oklch(56% 0.2 255);
  --google-green: oklch(65% 0.16 145);
  --google-yellow: oklch(75% 0.15 85);
  --google-red: oklch(59% 0.2 27);
  --overlay: oklch(15% 0.03 255 / 0.56);
  --shadow-color: oklch(28% 0.04 255 / 0.09);
  --ambient-blue-strong: oklch(74% 0.09 230 / 0.18);
  --ambient-blue-soft: oklch(71% 0.1 235 / 0.14);
  --ambient-dot: oklch(35% 0.08 250 / 0.045);
  --header-shadow: oklch(30% 0.03 250 / 0.04);
  --control-shadow: oklch(30% 0.04 250 / 0.04);
  --choice-shadow: oklch(28% 0.025 250 / 0.09);
  --accent-shadow: oklch(52% 0.2 255 / 0.2);
  --success-shadow: oklch(35% 0.1 170 / 0.22);
  --result-shadow: oklch(30% 0.04 250 / 0.13);
  --on-success: oklch(100% 0.003 250);
  --shadow: 0 16px 44px var(--shadow-color);
  --shadow-small: 0 5px 16px var(--shadow-color);
  --radius-small: 10px;
  --radius-medium: 15px;
  --radius-large: 24px;
  --font-display: "Noto Sans JP", "Noto Sans KR", "Arial Narrow", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Noto Sans JP", "Noto Sans KR", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, monospace;
  --font-sans: var(--font-body);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.953rem;
  --text-2xl: 2.441rem;
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --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: 220ms;
  --dur-long: 420ms;
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 200;
  --z-modal: 400;
  --z-toast: 500;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: oklch(18% 0.025 255);
    --surface: oklch(23% 0.03 255);
    --surface-raised: oklch(27% 0.035 255);
    --surface-subtle: oklch(31% 0.04 255);
    --text: oklch(96% 0.015 255);
    --text-muted: oklch(78% 0.035 255);
    --border: oklch(36% 0.04 255);
    --border-strong: oklch(47% 0.045 255);
    --accent: oklch(73% 0.14 255);
    --accent-hover: oklch(81% 0.1 255);
    --accent-soft: oklch(33% 0.07 255);
    --accent-contrast: oklch(19% 0.05 255);
    --teal: oklch(81% 0.11 178);
    --teal-bright: oklch(73% 0.14 178);
    --teal-soft: oklch(32% 0.055 178);
    --success: oklch(79% 0.11 158);
    --success-soft: oklch(30% 0.055 158);
    --success-border: oklch(57% 0.1 158);
    --danger: oklch(79% 0.1 24);
    --danger-soft: oklch(31% 0.055 24);
    --danger-border: oklch(55% 0.08 24);
    --focus: oklch(82% 0.1 255);
    --overlay: oklch(8% 0.02 255 / 0.72);
    --shadow-color: oklch(5% 0.02 255 / 0.28);
    --ambient-blue-strong: oklch(57% 0.11 235 / 0.18);
    --ambient-blue-soft: oklch(56% 0.1 235 / 0.15);
    --ambient-dot: oklch(91% 0.03 255 / 0.045);
    --header-shadow: oklch(3% 0.02 255 / 0.25);
  }
}