/* Hallmark · macrostructure: Workbench (app console) · tone: technical-editorial · anchor hue: 40 (Ipsion orange)
 * theme: studied-DNA (source: https://ipsion.ai/css/style.css "Editorial Gradient")
 * paper oklch(100% 0 0) · accent oklch(69.5% 0.19 40) · Space Grotesk + Inter + JetBrains Mono
 */
:root {
  /* paper + ink */
  --color-paper:    oklch(100% 0 0);
  --color-paper-2:  oklch(98.2% 0.003 286);
  --color-paper-3:  oklch(95.6% 0.005 286);
  --color-rule:     oklch(93.4% 0.006 286);
  --color-rule-2:   oklch(88% 0.008 286);
  --color-ink:      oklch(17% 0.006 285);
  --color-ink-2:    oklch(38% 0.01 285);
  --color-muted:    oklch(52% 0.014 286);
  --color-on-ink:   oklch(99% 0 0);

  /* brand */
  --color-brand:      oklch(69.5% 0.19 40);   /* #FE6B35: fills, marks, focus */
  --color-brand-ink:  oklch(55% 0.18 38);     /* orange that passes 4.5:1 as text */
  --color-brand-wash: oklch(96.5% 0.03 45);
  --color-rose:       oklch(64.5% 0.215 16);
  --color-violet:     oklch(60.6% 0.219 293);
  --color-violet-wash:oklch(96.5% 0.03 293);
  --color-ok:         oklch(58% 0.14 155);
  --color-danger:     oklch(55% 0.2 25);
  --grad: linear-gradient(90deg, var(--color-brand), var(--color-rose), var(--color-violet));
  --color-focus: var(--color-brand);
  --color-scrim: oklch(17% 0.006 285 / 0.4);

  /* type */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.375rem;
  --text-display: clamp(2.25rem, 5vw, 3.75rem);

  /* 4pt space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --rule-1: 1px solid var(--color-rule);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms; --dur-med: 220ms; --dur-slow: 320ms;

  --shadow-float: 0 1px 2px oklch(17% 0.006 285 / 0.06), 0 12px 32px oklch(17% 0.006 285 / 0.1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-med: 120ms; --dur-slow: 150ms; }
}