/* base.css — reset, tokens, typography */
:root {
    --color-bg: #f7f7f8;
    --color-surface: #ffffff;
    --color-surface-2: #f0f0f2;
    --color-border: #e2e2e5;
    --color-text: #121214;
    --color-muted: #6b7280;
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-danger: #dc2626;
    --color-success: #16a34a;
    --color-warning: #d97706;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 10px rgba(0,0,0,.08);
    --shadow-lg: 0 10px 25px rgba(0,0,0,.12);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Layout metrics */
    --topbar-h: 56px;
    --sidebar-w: 240px;
    --bottom-nav-h: 60px;
    --content-max: 1200px;
}
html[data-theme="dark"] {
    --color-bg: #0f1115;
    --color-surface: #171a21;
    --color-surface-2: #1e222b;
    --color-border: #2a2f3a;
    --color-text: #e6e8ec;
    --color-muted: #9aa1ac;
    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-danger: #ef4444;
    --color-success: #22c55e;
    --color-warning: #f59e0b;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 600; }
p { margin: 0 0 1em; }
code { background: var(--color-surface-2); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
svg.icon { display: block; flex-shrink: 0; }
.text-muted { color: var(--color-muted); }
.small { font-size: .85em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }
img, svg { max-width: 100%; }