/* Shared design tokens — maxonomy.net (introduction-product) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --portal-topbar-h: 56px;
  --header-h: 64px;
  --sidebar-w: 280px;
  --max-content: none;

  --bg: #ffffff;
  --bg-elevated: #fafafa;
  --bg-card: #f2f2f2;
  --border: #e5e7eb;
  --text: #0d0d0d;
  --text-muted: #888888;

  --accent: #0063f9;
  --accent-soft: rgba(0, 99, 249, 0.08);
  --accent-hover: #1e61f0;
  --accent-deep: #0052cc;

  --emph-yellow: #0063f9;
  --emph-yellow-dim: #f0f5ff;
  --emph-red: #ef141d;
  --emph-red-dim: rgba(239, 20, 29, 0.08);
  --warning: #ff9700;

  --code-bg: #f5f6f8;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.06);

  --font-sans: "SUIT", "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --header-bg: #ffffff;
  --header-border: #e5e7eb;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--accent-deep);
}