/* MARKTUN design tokens: primitive -> semantic -> component. */
:root {
  /* Primitive colors */
  --mt-color-primitive-ink-950: #020814;
  --mt-color-primitive-ink-900: #040b1b;
  --mt-color-primitive-ink-850: #09121f;
  --mt-color-primitive-ink-800: #111b2e;
  --mt-color-primitive-slate-600: #7d879e;
  --mt-color-primitive-slate-400: #a8b0c5;
  --mt-color-primitive-slate-100: #d8deeb;
  --mt-color-primitive-slate-050: #f2f4fa;
  --mt-color-primitive-blue-500: #5e78ff;
  --mt-color-primitive-blue-300: #91a1ff;
  --mt-color-primitive-purple-500: #7367ff;
  --mt-color-primitive-green-500: #2fd26f;
  --mt-color-primitive-amber-500: #f4b740;
  --mt-color-primitive-red-500: #ff5a67;
  --mt-color-primitive-white-a06: rgba(255, 255, 255, .06);
  --mt-color-primitive-white-a10: rgba(255, 255, 255, .10);
  --mt-color-primitive-white-a17: rgba(255, 255, 255, .17);
  --mt-color-primitive-black-a50: rgba(0, 0, 0, .50);

  /* Primitive geometry */
  --mt-space-1: 4px;
  --mt-space-2: 8px;
  --mt-space-3: 12px;
  --mt-space-4: 16px;
  --mt-space-5: 20px;
  --mt-space-6: 24px;
  --mt-space-8: 32px;
  --mt-space-10: 40px;
  --mt-space-12: 48px;
  --mt-radius-sm: 8px;
  --mt-radius-control: 14px;
  --mt-radius-card: 18px;
  --mt-radius-panel: 22px;
  --mt-radius-round: 999px;
  --mt-duration-fast: 120ms;
  --mt-duration-normal: 180ms;
  --mt-duration-slow: 280ms;
  --mt-ease-standard: cubic-bezier(.2, 0, 0, 1);

  /* Semantic roles */
  --mt-color-bg-canvas: var(--mt-color-primitive-ink-950);
  --mt-color-bg-surface: var(--mt-color-primitive-ink-850);
  --mt-color-bg-surface-soft: rgba(9, 18, 31, .72);
  --mt-color-bg-surface-raised: var(--mt-color-primitive-ink-800);
  --mt-color-bg-overlay: var(--mt-color-primitive-black-a50);
  --mt-color-text-primary: var(--mt-color-primitive-slate-050);
  --mt-color-text-secondary-strong: var(--mt-color-primitive-slate-100);
  --mt-color-text-secondary: var(--mt-color-primitive-slate-400);
  --mt-color-text-muted: var(--mt-color-primitive-slate-600);
  --mt-color-action-primary: var(--mt-color-primitive-blue-500);
  --mt-color-action-primary-strong: var(--mt-color-primitive-purple-500);
  --mt-color-action-primary-soft: rgba(94, 120, 255, .14);
  --mt-color-focus: var(--mt-color-primitive-blue-300);
  --mt-color-focus-soft: rgba(145, 161, 255, .38);
  --mt-color-border-subtle: var(--mt-color-primitive-white-a10);
  --mt-color-border-strong: var(--mt-color-primitive-white-a17);
  --mt-color-status-success: var(--mt-color-primitive-green-500);
  --mt-color-status-warning: var(--mt-color-primitive-amber-500);
  --mt-color-status-error: var(--mt-color-primitive-red-500);
  --mt-shadow-surface: 0 12px 36px rgba(0, 0, 0, .20);
  --mt-shadow-overlay: 0 24px 64px rgba(0, 0, 0, .34);

  /* Component roles */
  --mt-button-height: 48px;
  --mt-button-radius: var(--mt-radius-control);
  --mt-field-height: 48px;
  --mt-field-radius: var(--mt-radius-control);
  --mt-card-bg: var(--mt-color-bg-surface);
  --mt-card-border: var(--mt-color-border-subtle);
  --mt-card-radius: var(--mt-radius-card);
  --mt-card-padding: var(--mt-space-4);
  --mt-nav-width: 248px;
  --mt-nav-item-height: 48px;
  --mt-nav-item-radius: var(--mt-radius-control);
  --mt-dialog-radius: var(--mt-radius-panel);
  --mt-touch-min: 44px;
}