/* ============================================================
   Karamer Multiservices — Design tokens oficiales
   ============================================================
   Sistema de diseño "Fresco Tropical pero Enfocado": azul caribeño
   profundo como color de marca, coral cálido reservado para las
   acciones primarias (CTA) y base de blancos/grises limpios. El verde
   palma se usa solo como éxito/confirmación.

   Capa única de marca para el dashboard de compliance: todos los
   componentes consumen exclusivamente estas variables (el reporte HTML
   imprimible replica estos valores en dashboard/reports.py).
   ============================================================ */

:root {
  /* --- Color: primarios (marca) ------------------------------------ */
  --kmr-color-brand-900: #0A3D62;   /* azul océano profundo: footer, overlays */
  --kmr-color-brand-700: #0E5A8A;   /* azul caribe principal: títulos, iconos */
  --kmr-color-brand-500: #1B7FB8;   /* azul medio: enlaces, hover secundarios */
  --kmr-color-brand-300: #7FB6D9;   /* apoyo: focos, bordes activos */
  --kmr-color-brand-100: #DDF0F9;   /* azul agua claro: fondos alternos, chips */

  /* --- Color: acento / CTA (usar con disciplina) --------------------
     El coral solo aparece en la acción primaria de cada pantalla.     */
  --kmr-color-cta-600: #E8590C;     /* hover / estado activo del CTA */
  --kmr-color-cta-500: #F2711C;     /* coral principal del botón CTA */
  --kmr-color-cta-100: #FDEEE3;     /* coral pálido: banners, highlights */

  /* Alias legado (dorado → coral) para componentes existentes */
  --kmr-color-accent-500: var(--kmr-color-cta-500);
  --kmr-color-accent-700: var(--kmr-color-cta-600);

  /* --- Color: neutros ----------------------------------------------- */
  --kmr-color-ink: #1F2933;         /* texto principal */
  --kmr-color-ink-soft: #4A5560;    /* texto secundario */
  --kmr-color-ink-faint: #9AA5B1;   /* placeholders (nunca texto esencial) */
  --kmr-color-ink-inverse: #FFFFFF;
  --kmr-color-surface: #FFFFFF;
  --kmr-color-surface-alt: #F7FAFC; /* gris azulado muy claro */
  --kmr-color-border: #E4E9EE;

  /* --- Color: semánticos de compliance ------------------------------ */
  --kmr-color-ok: #1E8E5A;          /* verde palma — APPROVED / éxito */
  --kmr-color-ok-bg: #E3F5EC;
  --kmr-color-warn: #B26A00;        /* MANUAL_REVIEW / compliance-revision */
  --kmr-color-warn-bg: #FDF1DC;
  --kmr-color-danger: #B3261E;      /* BLOCKED / compliance-bloqueado */
  --kmr-color-danger-bg: #FBE9E7;
  --kmr-color-pending: #4A5560;     /* PENDING / compliance-pendiente */
  --kmr-color-pending-bg: #EEF1F5;

  /* --- Tipografía (Poppins títulos / Inter cuerpo) ------------------- */
  --kmr-font-heading: "Poppins", "Segoe UI", -apple-system, sans-serif;
  --kmr-font-base: "Inter", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --kmr-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --kmr-font-size-xs: 0.75rem;      /* 12px — metadatos, chips */
  --kmr-font-size-sm: 0.875rem;     /* 14px — notas, tablas densas */
  --kmr-font-size-md: 1rem;         /* 16px — body del dashboard */
  --kmr-font-size-lg: 1.375rem;     /* 22px — H3 / títulos de tarjeta */
  --kmr-font-size-xl: 2rem;         /* 32px — H2 / valores destacados */
  --kmr-font-weight-regular: 400;
  --kmr-font-weight-semibold: 600;
  --kmr-font-weight-bold: 700;
  --kmr-line-height: 1.6;

  /* --- Espaciado (base 8px) ------------------------------------------ */
  --kmr-space-1: 0.25rem;   /* 4px  — icono–texto */
  --kmr-space-2: 0.5rem;    /* 8px  — padding de badges/chips */
  --kmr-space-3: 1rem;      /* 16px — párrafos, gap interno de tarjetas */
  --kmr-space-4: 1.5rem;    /* 24px — padding de tarjetas, formularios */
  --kmr-space-5: 2rem;      /* 32px — gap entre tarjetas */
  --kmr-space-6: 4rem;      /* 64px — padding vertical de secciones */

  /* --- Bordes, radios y sombras --------------------------------------- */
  --kmr-radius-sm: 8px;             /* inputs, chips, badges */
  --kmr-radius-md: 12px;            /* tarjetas, banners */
  --kmr-radius-lg: 12px;
  --kmr-radius-pill: 999px;         /* botones CTA */
  --kmr-border: 1px solid var(--kmr-color-border);
  --kmr-shadow-sm: 0 4px 16px rgba(10, 61, 98, 0.08);   /* sombra azulada */
  --kmr-shadow-md: 0 8px 24px rgba(10, 61, 98, 0.14);   /* hover de tarjetas */

  /* --- Táctil / interacción ------------------------------------------- */
  --kmr-touch-target-min: 48px;
  --kmr-cta-height: 48px;
  --kmr-transition: 150ms ease;
}