/* ============================================================
   SIPP Design System — Tokens v0.1
   Fuente de verdad: docs/design-system.html
   ============================================================ */

:root {

  /* ── Teal — color institucional ─────────────────────────── */
  --teal-50:  #F1FAF9;
  --teal-100: #E0F2F1;
  --teal-200: #BFE7E5;
  --teal-300: #90D4D1;
  --teal-400: #6FCFCB;
  --teal-500: #2DB3AE;
  --teal-600: #189490;
  --teal-700: #007170;
  --teal-800: #005250;
  --teal-900: #003B3A;
  --teal-950: #002322;

  /* ── Ink — neutrales tibios ─────────────────────────────── */
  --ink-50:  #FAFBFA;
  --ink-100: #F4F6F5;
  --ink-150: #ECEFEE;
  --ink-200: #E2E7E6;
  --ink-300: #C5CECC;
  --ink-400: #98A4A2;
  --ink-500: #6B7976;
  --ink-600: #4A5957;
  --ink-700: #2D3D3B;
  --ink-800: #1C2C2A;
  --ink-900: #0E1816;

  /* ── Semánticos ─────────────────────────────────────────── */
  --success:    #047857;
  --success-bg: #ECFDF5;
  --warning:    #B45309;
  --warning-bg: #FEF6E7;
  --danger:     #B42318;
  --danger-bg:  #FEF1F0;
  --info:       #1A5BA8;
  --info-bg:    #EEF4FB;

  /* ── Tipografía ─────────────────────────────────────────── */
  --font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* ── Espaciado — base 4 ──────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Border radius ──────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-full: 999px;

  /* ── Sombras ────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(14,24,22,.06);
  --shadow-sm: 0 2px 6px rgba(14,24,22,.08);
  --shadow-md: 0 4px 14px rgba(14,24,22,.10);
  --shadow-lg: 0 8px 32px rgba(14,24,22,.14);

  /* ── Layout ─────────────────────────────────────────────── */
  --sidebar-w: 256px;
  --topbar-h:  64px;
}

/* ── Dark Mode — Overrides de tokens ─────────────────────── */
body.sipp-dark-mode {
  color-scheme: dark;

  /* Ink — neutrales oscuros */
  --ink-50:  #111B1A;
  --ink-100: #182322;
  --ink-150: #1C2A29;
  --ink-200: #223230;
  --ink-300: #2E4340;
  --ink-400: #788C8A;
  --ink-500: #95A5A3;
  --ink-600: #B2BDBC;
  --ink-700: #D0D9D8;
  --ink-800: #E2EAEA;
  --ink-900: #EEF3F2;

  /* Teal — más claro para visibilidad sobre fondo oscuro */
  --teal-50:  #091918;
  --teal-100: #0C2220;
  --teal-200: #123636;
  --teal-700: #5ECBC6;
  --teal-800: #80D7D4;
  --teal-900: #A7E3E0;

  /* Semánticos — variantes más claras para legibilidad */
  --success:    #34D399;
  --success-bg: rgba(52, 211, 153, .13);
  --warning:    #FCD34D;
  --warning-bg: rgba(252, 211, 77, .11);
  --danger:     #F87171;
  --danger-bg:  rgba(248, 113, 113, .13);
  --info:       #60A5FA;
  --info-bg:    rgba(96, 165, 250, .12);

  /* Sombras — más profundas en oscuro */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.35);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.45);
  --shadow-md: 0 4px 16px rgba(0,0,0,.55);
  --shadow-lg: 0 8px 36px rgba(0,0,0,.65);
}