:root {
  /* ── SURFACES ── */
  --bg: #f0f8fc;
  --surface: #fff;
  --surface2: #e8f4f9;
  --surface3: #d6eef7;

  /* ── BORDERS ── */
  --border: rgba(11,93,134,.1);
  --border-med: rgba(11,93,134,.18);

  /* ── TEXT ── */
  --text: #0B2E3E;
  --text-2: #3a6478;
  --text-3: #7aa3b5;

  /* ── ACCENT ── */
  --accent: #0F7BA0;
  --accent-l: #E0F3FA;
  --accent-t: #083D52;
  --accent-hover: #0A6688;

  /* ── SEMANTIC COLORS ── */
  --danger: #c0392b;
  --danger-l: #fdecea;
  --danger-t: #7b1c13;
  --danger-hover: #a93226;

  --success: #1e7e4a;
  --success-l: #e4f5ec;
  --success-t: #0f4a2a;

  --warn: #b45309;
  --warn-l: #fef3c7;
  --warn-t: #7a3800;

  --plan: #7c3aed;
  --plan-l: #ede9fe;
  --plan-t: #4c1d95;

  /* info aliases accent */
  --info-l: var(--accent-l);
  --info-t: var(--accent-t);

  /* ── ONE-OFF COLORS ── */
  --color-notification: #E07A5F;
  --color-highlight: #FFF176;

  /* ── TYPOGRAPHY ── */
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* ── SHAPE ── */
  --radius: 12px;
  --radius-sm: 8px;
  --pill: 999px;

  /* ── ELEVATION ── */
  --shadow: 0 1px 3px rgba(11,61,82,.07), 0 4px 16px rgba(11,61,82,.06);
  --shadow-sm: 0 1px 2px rgba(11,61,82,.06);
  --shadow-hover: 0 4px 16px rgba(11,61,82,.12);
  --focus-ring: 0 0 0 3px rgba(15,123,160,.15);

  /* ── MISC ── */
  --backdrop: rgba(0,0,0,.4);
  --gradient-body: linear-gradient(135deg, #D6EFF8 0%, #F8F2EE 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1f2d;
    --surface: #162635;
    --surface2: #1d3040;
    --surface3: #243a4d;
    --border: rgba(100,180,220,.1);
    --border-med: rgba(100,180,220,.2);
    --text: #e2f0f7;
    --text-2: #8ab5cc;
    --text-3: #4d7d94;
    --accent: #38bdf8;
    --accent-l: rgba(56,189,248,.15);
    --accent-t: #bae6fd;
    --accent-hover: #0ea5e9;
    --danger: #f87171;
    --danger-l: rgba(248,113,113,.15);
    --danger-t: #fecaca;
    --danger-hover: #ef4444;
    --success: #4ade80;
    --success-l: rgba(74,222,128,.15);
    --success-t: #bbf7d0;
    --warn: #fbbf24;
    --warn-l: rgba(251,191,36,.15);
    --warn-t: #fde68a;
    --plan: #a78bfa;
    --plan-l: rgba(167,139,250,.15);
    --plan-t: #ddd6fe;
    --color-notification: #fb923c;
    --color-highlight: rgba(255,241,118,.25);
    --shadow: 0 1px 3px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-hover: 0 4px 16px rgba(0,0,0,.4);
    --focus-ring: 0 0 0 3px rgba(56,189,248,.2);
    --backdrop: rgba(0,0,0,.6);
    --gradient-body: linear-gradient(135deg, #0d1f2d 0%, #162030 100%);
  }
}