/* ============================================================
   GRIDO DASHBOARDS — Design Tokens
   Paleta: Azul / Celeste / Blanco + tonos claros modernos
   Estilo: Power BI moderno · Stripe · Vercel analytics
   ============================================================ */

:root {
  /* ---- Marca Grido (azul / celeste) ---- */
  --brand-900: #0a2a66;
  --brand-800: #0b3a8c;
  --brand-700: #0e4cbf;
  --brand-600: #1560e6;   /* azul principal */
  --brand-500: #2b78ff;   /* azul vivo */
  --brand-400: #5b9bff;
  --brand-300: #8fbcff;
  --brand-200: #c4dbff;
  --brand-100: #e6f0ff;

  --celeste-600: #0ea5e9;
  --celeste-500: #2ec5f6;  /* celeste principal */
  --celeste-400: #5bd2f8;
  --celeste-300: #93e0fb;
  --celeste-200: #c7eefd;
  --celeste-100: #e7f8fe;

  /* ---- Neutros / superficie ---- */
  --bg:        #f5f8fc;
  --bg-soft:   #eef3fa;
  --surface:   #ffffff;
  --surface-2: #fbfdff;
  --border:    #e4eaf2;
  --border-strong: #d3dcea;

  /* ---- Texto ---- */
  --ink-900: #0c1b33;
  --ink-700: #2a3b56;
  --ink-500: #5b6b85;
  --ink-400: #8493ab;
  --ink-300: #aab6c9;

  /* ---- Semánticos ---- */
  --success: #16a34a;
  --success-bg: #e7f7ee;
  --warning: #d97706;
  --warning-bg: #fdf3e3;
  --danger:  #e11d48;
  --danger-bg: #fde8ed;
  --info: var(--celeste-600);

  /* ---- Gradientes ---- */
  --grad-brand: linear-gradient(135deg, var(--brand-600) 0%, var(--celeste-500) 100%);
  --grad-brand-soft: linear-gradient(135deg, #1560e6 0%, #2ec5f6 120%);
  --grad-surface: linear-gradient(180deg, #ffffff 0%, #fafcff 100%);

  /* ---- Sombras ---- */
  --sh-xs: 0 1px 2px rgba(12,27,51,.06);
  --sh-sm: 0 2px 8px rgba(12,27,51,.06);
  --sh-md: 0 8px 24px rgba(12,27,51,.08);
  --sh-lg: 0 18px 48px rgba(12,27,51,.12);
  --sh-brand: 0 10px 30px rgba(21,96,230,.25);

  /* ---- Radios ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- Tipografía ---- */
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-display: clamp(28px, 4vw, 40px);
  --fs-kpi: clamp(26px, 3.4vw, 38px);
  --fs-h1: 22px;
  --fs-h2: 17px;
  --fs-body: 14px;
  --fs-sm: 12.5px;
  --fs-xs: 11px;

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 68px;
  --gap: 18px;
  --maxw: 1560px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .28s;
}

/* Paleta categórica para gráficos (Tipos de producto) */
:root {
  --c1: #1560e6;
  --c2: #2ec5f6;
  --c3: #7c5cff;
  --c4: #00b8a9;
  --c5: #ff7a59;
  --c6: #ffba49;
  --c7: #f25f9c;
  --c8: #5b9bff;
  --c9: #34d399;
  --c10:#a78bfa;
}