/* Tokens de diseño de ConserBI (prefijo --cb-*).
 *
 * Valores extraídos tal cual de las tres superficies ya rediseñadas
 * (dashboard/dashboard.css, base/login/login_style.css y
 * sarlaft/context/transactions_documents/documents_board.css), no son
 * colores/medidas nuevas. Este archivo solo declara variables: no aplica
 * ningún estilo por sí mismo, así que cargarlo no cambia nada visualmente
 * hasta que una pantalla empiece a usar var(--cb-*).
 *
 * Al rediseñar un módulo nuevo, usa estas variables (y las clases de
 * components.css) en vez de volver a escribir hex sueltos. Ver
 * static/app/css/README.md para la convención completa.
 */

:root {
  /* ---------- Marca ---------- */
  --cb-color-primary: #134fa9;      /* azul de marca (sidebar, acentos fuertes) */
  --cb-color-primary-strong: #1d4ed8; /* azul de acción/enlace (transactions_documents) */
  --cb-color-primary-soft: #4e73df; /* azul sb-admin-2 (iconos, focus) */
  --cb-color-accent: #f39216;       /* naranja de marca (detalle del logo) */

  /* ---------- Texto ---------- */
  --cb-color-ink: #16294d;          /* títulos oscuros */
  --cb-color-body: #3a4358;         /* texto de cuerpo */
  --cb-color-text: #2c2d35;         /* texto de tablas/legacy */
  --cb-color-muted: #7b849c;        /* texto secundario */
  --cb-color-muted-2: #9aa2b6;      /* texto terciario / iconos apagados */
  --cb-color-placeholder: #cbd3e1;  /* placeholders, scrollbar */

  /* ---------- Superficies y bordes ---------- */
  --cb-color-surface: #ffffff;
  --cb-color-surface-tint: #f6faff;  /* fondo azulado muy suave */
  --cb-color-surface-tint-strong: #e8f1ff; /* fondo de badges/íconos azules */
  --cb-color-border: #e6eaf2;         /* borde estándar de tarjetas */
  --cb-color-border-soft: #eef1f7;    /* separador sutil */

  /* ---------- Semánticos (alineados con los valores de Bootstrap que ya usa la app) ---------- */
  --cb-color-success: #28a745;
  --cb-color-success-ink: #1e7e34;
  --cb-color-success-tint: #e8f7ec;

  --cb-color-warning: #f7a105;
  --cb-color-warning-ink: #b45c00;
  --cb-color-warning-tint: #fffaf0;

  --cb-color-danger: #dc3545;
  --cb-color-danger-ink: #c02434;
  --cb-color-danger-tint: #fdeaec;

  --cb-color-info: #03a9f4;
  --cb-color-info-ink: #0b7fa8;
  --cb-color-info-tint: #e4f5fe;

  /* ---------- Bordes y tintes de acción ----------
   * Los usan los botones outline. Valores extraídos tal cual de
   * transactions_documents/documents_board.css, que fue donde nacieron.
   */
  --cb-color-primary-border: #cddcf7;
  --cb-color-success-border: #a8dfb8;
  --cb-color-success-tint-soft: #f4fcf6;
  --cb-color-warning-border: #f6d79a;
  --cb-color-warning-tint-strong: #fff3e0;

  /* ---------- Serie categórica de segmentos ----------
   * Orden fijo por número de segmento (nunca por tamaño), para que el color
   * de un segmento no cambie cuando cambian los datos. Los nueve valores
   * cubren el rango de NUMBER_CLUSTERS (3 a 9). Están validados: las 36
   * parejas superan la separación bajo protanopía/deuteranopía (peor caso
   * 8,8 en OKLab dE x100) y visión normal (peor caso 15,6), y todos
   * contrastan al menos 3:1 contra blanco. Ninguno es un color semántico:
   * verde, rojo y ámbar quedan reservados para los estados.
   */
  --cb-color-segment-1: #1d4ed8;
  --cb-color-segment-2: #ef6c19;
  --cb-color-segment-3: #0f8f78;
  --cb-color-segment-4: #a30d5c;
  --cb-color-segment-5: #6b1fa3;
  --cb-color-segment-6: #96601f;
  --cb-color-segment-7: #cc63c9;
  --cb-color-segment-8: #3f95f5;
  --cb-color-segment-9: #f91570;

  /* ---------- Tipografía ---------- */
  --cb-font-family: Nunito, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --cb-font-xs: 11.5px;
  --cb-font-sm: 12.5px;
  --cb-font-base: 13.5px;
  --cb-font-md: 15px;
  --cb-font-lg: 19px;
  --cb-font-xl: 25px;
  --cb-font-xxl: 30px;

  /* ---------- Espaciado ---------- */
  --cb-space-1: 4px;
  --cb-space-2: 8px;
  --cb-space-3: 12px;
  --cb-space-4: 16px;
  --cb-space-5: 20px;
  --cb-space-6: 24px;
  --cb-space-8: 32px;

  /* ---------- Radios ---------- */
  --cb-radius-sm: 8px;
  --cb-radius-md: 10px;
  --cb-radius-lg: 12px;
  --cb-radius-xl: 14px;
  --cb-radius-xxl: 16px;
  --cb-radius-pill: 20px;
  --cb-radius-circle: 50%;

  /* ---------- Sombras ---------- */
  --cb-shadow-xs: 0 1px 2px rgba(22, 41, 77, 0.04);
  --cb-shadow-sm: 0 2px 8px rgba(19, 79, 169, 0.14);
  --cb-shadow-md: 0 6px 16px rgba(22, 41, 77, 0.08);
  --cb-shadow-lg: 0 10px 24px rgba(22, 41, 77, 0.12);
  --cb-shadow-xl: 0 24px 60px rgba(22, 41, 77, 0.18);
}