/* ==========================================================================
   Paragon V2 — Design Tokens
   Fidelidad 1:1 con el Design Spec (sección 1). Tema claro (warm grey).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Colores base ---------- */
  --bg-canvas:      #EEECEA;   /* fondo del canvas principal */
  --bg-page:        #F2F1EF;   /* fondo de páginas/paneles */
  --bg-sidebar:     #FAFAF9;   /* fondo sidebar */
  --bg-topbar:      #FAFAF9;   /* fondo topbar */
  --bg-card:        #FFFFFF;   /* cards y paneles */
  --bg-card-hover:  #F7F6F4;   /* cards en hover */

  --border:         #E5E4E1;   /* borders generales */
  --border-strong:  #D1D0CC;   /* borders más visibles */

  --text-primary:   #1A1A1A;
  --text-secondary: #6B6A67;
  --text-tertiary:  #9B9A97;

  --accent:         #4F46E5;   /* índigo — acento principal */
  --accent-light:   #EEF2FF;   /* fondo acento suave */
  --accent-hover:   #4338CA;

  --success:        #10B981;   /* OK / conectado */
  --warning:        #F59E0B;   /* alerta */
  --danger:         #EF4444;   /* crítico */
  --connections:    #C8C7C3;   /* líneas del canvas */

  --accent-soft:    rgba(79,70,229,0.08);

  /* ---------- Colores de áreas (hexágonos) ---------- */
  --area-compras-fill:     #EEF2FF;  --area-compras-stroke:     #4F46E5;
  --area-produccion-fill:  #E0F2FE;  --area-produccion-stroke:  #0EA5E9;
  --area-calidad-fill:     #FFFBEB;  --area-calidad-stroke:     #F59E0B;
  --area-logistica-fill:   #F5F3FF;  --area-logistica-stroke:   #8B5CF6;
  --area-finanzas-fill:    #ECFDF5;  --area-finanzas-stroke:    #10B981;
  --area-rrhh-fill:        #FDF2F8;  --area-rrhh-stroke:        #EC4899;

  /* ---------- Tipografía ---------- */
  --font-primary: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', 'SF Mono', ui-monospace, monospace;

  /* ---------- Espaciado y bordes ---------- */
  --radius-card:  12px;
  --radius-chip:  6px;
  --radius-btn:   8px;

  --shadow-card:  0 1px 4px rgba(0,0,0,0.06);
  --shadow-panel: 0 4px 24px rgba(0,0,0,0.10);
  --shadow-modal: 0 8px 40px rgba(0,0,0,0.12);
  --shadow-cos:   0 4px 20px rgba(79,70,229,0.45);

  /* ---------- Transiciones ---------- */
  --t-hover:   150ms ease;
  --t-sidebar: 250ms ease;
  --t-panel:   280ms ease;

  /* ---------- Métricas del shell ---------- */
  --topbar-h:        52px;
  --sidebar-w:       220px;
  --sidebar-w-collapsed: 56px;
  --panel-w:         360px;
}

/* Paleta de 8 colores para el selector de áreas (onboarding paso 2) */
:root {
  --swatch-1: #4F46E5;  /* índigo */
  --swatch-2: #0EA5E9;  /* cyan */
  --swatch-3: #F59E0B;  /* ámbar */
  --swatch-4: #8B5CF6;  /* violeta */
  --swatch-5: #10B981;  /* verde */
  --swatch-6: #EC4899;  /* rosa */
  --swatch-7: #EF4444;  /* rojo */
  --swatch-8: #64748B;  /* slate */
}