@layer reset, tokens, base, layout, components, utilities, overrides;

@layer tokens {
  :root {
    --border-default: 1px solid var(--color-border);
    --color-accent: #0066cc;
    --color-border: #171717;
    --color-code-surface: #e4e3dd;
    --color-danger: #a52a2a;
    --color-danger-surface: #f3d8d8;
    --color-media-placeholder: #deddd7;
    --color-muted: #6b6b66;
    --color-paper: #f4f3ee;
    --color-success: #00a878;
    --color-surface: #ffffff;
    --color-text: #171717;
    --control-min-height: 44px;
    --font-mono: "Ioskeley Mono", "SFMono-Regular", Consolas, monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-size-2xs: 10px;
    --font-size-base: 16px;
    --font-size-sm: 12px;
    --font-size-xs: 11px;
    --line-height-body: 1.4;
    --line-height-prose: 1.55;
    --line-height-tight: 1;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 40px;
    --space-8: 48px;
    --space-9: 64px;
    --space-10: 72px;
    --space-11: 96px;
    --space-12: 144px;
    --space-gutter: clamp(var(--space-4), 2.5vw, var(--space-7));
  }
}