@import '@fontsource-variable/inter';
@import '@fontsource-variable/source-serif-4';
@import 'tailwindcss';
@import './tokens.css';

/* Tokens are the single source of truth; Tailwind utilities read them from here. */
@theme inline {
  --color-canvas: var(--canvas);
  --color-surface: var(--surface);
  --color-surface-muted: var(--surface-muted);
  --color-line: var(--line);
  --color-line-strong: var(--line-strong);
  --color-ink: var(--ink);
  --color-ink-muted: var(--ink-muted);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-accent-tint: var(--accent-tint);
  --color-accent-ink: var(--accent-ink);
  --color-on-accent: var(--on-accent);
  --color-danger: var(--danger);
  --color-danger-tint: var(--danger-tint);
  --color-success: var(--success);
  --color-success-tint: var(--success-tint);
  --radius-sm: var(--radius-sm);
  --radius-md: var(--radius-md);
  --radius-lg: var(--radius-lg);
  --font-sans: var(--font-sans);
  --font-serif: var(--font-serif);
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    min-height: 100dvh;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-sans);
    font-feature-settings: 'cv11', 'ss01';
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3 {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: -0.01em;
  }

  :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }
}