/* Hallmark · macrostructure: Narrative Workflow · genre: modern-minimal · theme: Cobalt
 * nav: N13 · footer: Ft2 · enrichment: code hero
 * audience: 社内ツールを自前で作りたいエンジニア · use: 相談予約 · tone: technical
 * pre-emit critique: P5 H5 E5 S5 R4 V5
 */

:root {
  --color-paper:      oklch(98.5% 0.004 250);
  --color-paper-2:    oklch(96% 0.006 252);
  --color-paper-3:    oklch(93% 0.008 254);
  --color-ink:        oklch(24% 0.02 258);
  --color-ink-2:      oklch(34% 0.018 257);
  --color-ink-3:      oklch(52% 0.012 256);
  --color-rule:       oklch(88% 0.008 252);
  --color-rule-2:     oklch(82% 0.01 254);
  --color-accent:     oklch(58% 0.20 256);
  --color-accent-ink: oklch(98% 0.004 250);
  --color-focus:      oklch(58% 0.20 256);
  --color-graphite:   oklch(22% 0.016 260);
  --color-graphite-2: oklch(20% 0.016 260);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;
  --text-display-s: clamp(2rem, 4vw + 0.5rem, 3.5rem);
  --text-display:   clamp(2.5rem, 5vw + 0.5rem, 4.25rem);

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-base: 240ms;
  --dur-slow: 320ms;
  --dur-reveal: 600ms;

  --radius-input: 6px;
  --radius-btn:   6px;
  --radius-card:  10px;
}