/* ============================================================
   BASE — Design tokens, reset, body, typography
   ============================================================ */

:root {
    --bg:#f5f6f8;
    --bg-soft:#ffffff;
    --surface:#ffffff;
    --surface-2:#f9fafb;
    --line:#e5e7eb;
    --line-soft:rgba(17,24,39,.08);
    --text:#14171f;
    --muted:#667085;
    --accent:#13a36b;
    --accent-2:#2f6df6;
    --accent-soft:rgba(19,163,107,.10);
    --accent-warm:#f5d442;
    --danger:#dc2626;
    --shadow:0 10px 28px rgba(17,24,39,.08);
    --sidebar-width:312px;
    --topbar-height:86px;
    --input-bg:#ffffff;
    --page-max:1440px;
    --radius-xl:16px;
    --radius-lg:12px;
    --radius-md:8px;
    --radius-sm:6px;
}

html[data-theme="dark"] {
    --bg:#101418;
    --bg-soft:#171c22;
    --surface:#1c2229;
    --surface-2:#151a20;
    --line:#2d3540;
    --line-soft:rgba(229,231,235,.10);
    --text:#f3f4f6;
    --muted:#a5adba;
    --accent:#38d58a;
    --accent-2:#6aa2ff;
    --accent-soft:rgba(56,213,138,.12);
    --accent-warm:#f5d442;
    --danger:#f87171;
    --shadow:0 14px 34px rgba(0,0,0,.26);
    --input-bg:#12171d;
}

* { box-sizing:border-box; }
html, body { min-height:100%; }
body {
    margin:0;
    font-family:'Barlow', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size:15px;
    line-height:1.5;
    color:var(--text);
    background:linear-gradient(180deg, var(--bg-soft) 0, var(--bg) 280px);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; }
img { max-width:100%; display:block; }

h1, h2, h3 { margin-top:0; letter-spacing:0; }
h1 { font-size:clamp(30px, 3vw, 44px); line-height:1.04; }
h2 { font-size:24px; line-height:1.15; }
h3 { line-height:1.2; }
p { line-height:1.6; }
.muted { color:var(--muted); }

::selection {
    background:rgba(245,212,66,.55);
    color:#111827;
}

/* ═══════════════════════════════════════════════════
   Utility classes — Phase 2.2 inline-style cleanup
   ═══════════════════════════════════════════════════ */

/* Spacing — margin */
.m-0  { margin:0; }
.mt-0 { margin-top:0; }
.mb-0 { margin-bottom:0; }
.mt-4  { margin-top:4px; }
.mt-6  { margin-top:6px; }
.mt-8  { margin-top:8px; }
.mt-10 { margin-top:10px; }
.mt-12 { margin-top:12px; }
.mt-14 { margin-top:14px; }
.mt-16 { margin-top:16px; }
.mt-18 { margin-top:18px; }
.mt-20 { margin-top:20px; }
.mt-22 { margin-top:22px; }
.mb-4  { margin-bottom:4px; }
.mb-6  { margin-bottom:6px; }
.mb-8  { margin-bottom:8px; }
.mb-10 { margin-bottom:10px; }
.mb-12 { margin-bottom:12px; }
.mb-14 { margin-bottom:14px; }
.mb-16 { margin-bottom:16px; }
.mb-18 { margin-bottom:18px; }
.mb-20 { margin-bottom:20px; }
.mb-24 { margin-bottom:24px; }

/* Display */
.hidden      { display:none !important; }
.block       { display:block; }
.inline-block { display:inline-block; }
.flex        { display:flex; }
.flex-col    { display:flex; flex-direction:column; }
.flex-wrap   { flex-wrap:wrap; }
.flex-1      { flex:1; }
.flex-shrink-0 { flex-shrink:0; }
.min-w-0     { min-width:0; }

/* Flex alignment */
.items-center   { align-items:center; }
.items-start    { align-items:flex-start; }
.items-end      { align-items:flex-end; }
.justify-between { justify-content:space-between; }
.justify-center  { justify-content:center; }
.justify-end     { justify-content:flex-end; }

/* Gap */
.gap-4  { gap:4px; }
.gap-6  { gap:6px; }
.gap-8  { gap:8px; }
.gap-10 { gap:10px; }
.gap-12 { gap:12px; }
.gap-14 { gap:14px; }
.gap-16 { gap:16px; }
.gap-20 { gap:20px; }

/* Text */
.text-center { text-align:center; }
.text-right  { text-align:right; }
.font-bold   { font-weight:700; }
.font-size-11 { font-size:11px; }
.font-size-12 { font-size:12px; }
.font-size-13 { font-size:13px; }
.font-size-14 { font-size:14px; }
.nowrap     { white-space:nowrap; }
.monospace  { font-family:monospace; }
.truncate   { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Color */
.color-muted    { color:var(--muted); }
.color-accent   { color:var(--accent); }
.color-accent-2 { color:var(--accent-2); }
.color-danger   { color:#ef4444; }
.color-warning  { color:#f59e0b; }
.color-success  { color:#86efac; }

/* Width / image */
.w-full { width:100%; }
.object-cover { object-fit:cover; }

/* Grid helpers */
.span-full { grid-column:1/-1; }

/* Cursor */
.cursor-pointer { cursor:pointer; }