@layer ta.tokens, ta.base, ta.layout, ta.components, ta.article;

@layer ta.tokens {
  :root {
    --ta-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --ta-font-serif: Georgia, "Times New Roman", serif;
    --ta-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  }

  .ta-page {
    --ta-bg: #f4f5f6;
    --ta-surface: #ffffff;
    --ta-surface-soft: #f8f8f8;
    --ta-ink: #1b1b1f;
    --ta-ink-soft: #3a3a40;
    --ta-muted: #73737b;
    --ta-muted-light: #96969d;
    --ta-line: #e5e5e8;
    --ta-line-strong: #d6d6dc;
    --ta-accent: #6b2737;
    --ta-accent-hover: #5a1f2d;
    --ta-accent-soft: #f5edef;
    --ta-focus: #c8d7ff;
    --ta-warning: #b45309;
    --ta-success: #16803d;
    --ta-radius-xs: 6px;
    --ta-radius-sm: 10px;
    --ta-radius-md: 16px;
    --ta-content: 1180px;
    --ta-article: 704px;
    --ta-progress: 0%;
  }
}