/* ══════════════════════════════════════════════════════════════
   TERAGEST DEV — CSS Variables & Theme System
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Light theme */
  --bg: #f0f2f8;
  --surface: #ffffff;
  --surface2: #f4f5fb;
  --surface3: #e8eaf4;
  --border: #d0d4ea;
  --border2: #b8bdd6;
  --accent: #2563eb;
  --accent2: #7c3aed;
  --accent4: #059669;
  --text: #1a1e30;
  --text2: #4a5280;
  --text3: #8890b0;
  --danger: #dc2626;
  --ok: #16a34a;
  --warn: #d97706;
  --grad: linear-gradient(135deg, #2563eb, #7c3aed);
  --grad-ok: linear-gradient(135deg, #16a34a, #059669);
  --grad-stop: linear-gradient(135deg, #dc2626, #db2777);
  --sh: 0 2px 12px rgba(20,18,50,.08);
  --sh-acc: 0 4px 18px rgba(37,99,235,.15);
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

.noche {
  --bg: #0a0c12;
  --surface: #13151e;
  --surface2: #1a1d28;
  --surface3: #222537;
  --border: #2a2e42;
  --border2: #373c58;
  --accent: #4f8ef7;
  --accent2: #7c5cfc;
  --accent4: #5cf7c0;
  --text: #eaecf5;
  --text2: #9da3bc;
  --text3: #5c6285;
  --danger: #f7574f;
  --ok: #4ff787;
  --warn: #f7b74f;
  --grad: linear-gradient(135deg, #4f8ef7, #7c5cfc);
  --grad-ok: linear-gradient(135deg, #4ff787, #5cf7c0);
  --grad-stop: linear-gradient(135deg, #f7574f, #f75c8e);
  --sh: 0 2px 12px rgba(0,0,0,.25);
  --sh-acc: 0 4px 18px rgba(79,142,247,.2);
}