/* ═══════════════════════════════════════════════════
   PINEDI COMPLIANCE — SISTEMA DE DISEÑO
   variables.css
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ── Paleta base (modo oscuro por defecto) ── */
  --ink-900: #0a0f1e;
  --ink-800: #0f1629;
  --ink-700: #141d36;
  --ink-600: #1a2544;
  --ink-500: #223058;
  --ink-400: #2d3f72;

  /* ── Acento primario — verde esmeralda ── */
  --accent:        #00d4a0;
  --accent-hover:  #00f0b8;
  --accent-dim:    #00d4a018;
  --accent-soft:   #00d4a030;

  /* ── Acento secundario — coral/naranja ── */
  --warn:          #ff6b4a;
  --warn-dim:      #ff6b4a18;

  /* ── Acento terciario — azul eléctrico ── */
  --info:          #4d9fff;
  --info-dim:      #4d9fff18;

  /* ── Texto ── */
  --text-primary:   #e8edf8;
  --text-secondary: #8a95b8;
  --text-muted:     #4a5578;
  --text-disabled:  #2d3a5a;

  /* ── Superficies ── */
  --surface-0:  var(--ink-900);
  --surface-1:  var(--ink-800);
  --surface-2:  var(--ink-700);
  --surface-3:  var(--ink-600);
  --surface-4:  var(--ink-500);

  /* ── Bordes ── */
  --border:       rgba(255,255,255,0.07);
  --border-mid:   rgba(255,255,255,0.12);
  --border-strong:rgba(255,255,255,0.20);

  /* ── Semánticos ── */
  --success:      #00d4a0;
  --success-dim:  #00d4a015;
  --danger:       #ff4d6a;
  --danger-dim:   #ff4d6a15;
  --warning:      #ffb84d;
  --warning-dim:  #ffb84d15;

  /* ── Tipografía ── */
  --font-display: 'Syne', sans-serif;
  --font-body:    'Inter', sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  42px;

  /* ── Layout ── */
  --sidebar-w:     260px;
  --sidebar-w-col: 72px;
  --header-h:      60px;
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-full:   9999px;

  /* ── Sombras ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-accent: 0 0 24px rgba(0,212,160,0.2);

  /* ── Transiciones ── */
  --transition: 180ms ease;
  --transition-slow: 300ms ease;

  /* ── Sidebar ── */
  --sidebar-bg: var(--ink-800);
}

/* ─── MODO CLARO ─── */
body.light {
  --ink-900: #f0f4ff;
  --ink-800: #ffffff;
  --ink-700: #f7f9ff;
  --ink-600: #eef1fa;
  --ink-500: #e2e7f5;

  --text-primary:   #0f1629;
  --text-secondary: #4a5578;
  --text-muted:     #8a95b8;
  --text-disabled:  #c0c8e0;

  --border:       rgba(0,0,0,0.07);
  --border-mid:   rgba(0,0,0,0.12);
  --border-strong:rgba(0,0,0,0.20);

  --surface-0:  #f0f4ff;
  --surface-1:  #ffffff;
  --surface-2:  #f7f9ff;
  --surface-3:  #eef1fa;
  --surface-4:  #e2e7f5;

  --sidebar-bg: #0f1629;
}