/* base.css — tokens, fonts, resets */
:root {
  /* Color system: “serious future” */
  --bg: #0b1020;           /* deep space */
  --bg-elev: #11162b;      /* elevated panels */
  --text: #e9edf7;         /* primary text */
  --text-dim: #a9b4d0;     /* secondary text */
  --brand: #9ab6ff;        /* accents/links */
  --line: #2a3250;         /* hairlines/dividers */
  --good: #7be28a;
  --warn: #ffcc66;
  --bad:  #ff827a;

  /* Spacing & radius */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --radius: 14px;

  /* Typography scale */
  --font-sans: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --fs-xxl: clamp(28px, 4vw, 44px);
  --fs-xl:  clamp(22px, 3vw, 32px);
  --fs-lg:  20px;
  --fs-md:  16px;
  --fs-sm:  14px;
  --lh: 1.6;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body { font-family: var(--font-sans); line-height: var(--lh); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1080px; margin: 0 auto; padding: var(--space-6) var(--space-5); }
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-5); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }

.meta { color: var(--text-dim); font-size: var(--fs-sm); }

/* Utility */
.mt-4{ margin-top: var(--space-4); } .mt-6{ margin-top: var(--space-6); }
.mb-4{ margin-bottom: var(--space-4); } .mb-6{ margin-bottom: var(--space-6); }
.grid { display: grid; gap: var(--space-5); }
.hide { display:none; }

/* Headings */
h1,h2,h3 { margin: 0 0 var(--space-3); }
h1 { font-size: var(--fs-xxl); line-height: 1.15; }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

/* Theme toggle ready (optional future) */
.theme-light {
  --bg: #ffffff;
  --bg-elev: #f6f7fb;
  --text: #0d1321;
  --text-dim: #4a5268;
  --brand: #2346ff;
  --line: #e6e9f2;
}