/* ============================================================
   comfacor-ds.css — Comfacor Design System (tokens canónicos)
   ------------------------------------------------------------
   Fuente única de verdad para las vistas públicas. Portado desde
   el "Comfacor Design System" (Claude Design).

   Reglas de marca:
     · Tres colores institucionales: azul (primario), verde (apoyo),
       amarillo (acento/CTA). Cada pieza debe llevar al menos un
       color institucional.
     · Regla de color 60-30-10. Sin degradados.
     · Neutros CÁLIDOS (crema/tinta), nunca grises fríos.
     · Tipografía única: Poppins.
     · Esquinas suaves, sombras bajas, bordes cálidos de 1px.

   Uso: enlazar ANTES de public_base.css / estilos por vista.
   Cualquier código nuevo debe consumir estos tokens (--comfacor-*,
   --radius-*, --shadow-*, --text-*, --surface-*, --space-*).
   ============================================================ */

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

:root {
  /* ---- Institucional / marca ---- */
  --comfacor-azul: #0f8cea;        /* Primario — protección, confianza */
  --comfacor-verde: #6bbf6b;       /* Bienestar, Córdoba, naturaleza */
  --comfacor-amarillo: #f7c90b;    /* Acento, energía, llamados a la acción */

  /* Tints / shades para estados de UI */
  --comfacor-azul-700: #0b6fbb;
  --comfacor-azul-50:  #e8f3fd;
  --comfacor-azul-100: #d6e9fb;
  --comfacor-verde-700: #3a7a3a;
  --comfacor-verde-50:  #e8f5e8;
  --comfacor-amarillo-700: #9a7a00;
  --comfacor-amarillo-50:  #fdf3cf;
  --comfacor-amarillo-hover: #d9af00; /* hover del CTA amarillo (más legible que el 700 olivo) */

  /* ---- Neutrales cálidos ---- */
  --neutral-ink: #1a1a1a;          /* Tinta — texto principal */
  --neutral-700: #3d3d3a;          /* Gris oscuro — texto secundario */
  --neutral-500: #5b5b57;          /* Texto de apoyo */
  --neutral-400: #8a8a86;          /* Texto terciario, captions */
  --neutral-300: #b9b6ac;          /* Etiquetas, placeholders */
  --neutral-200: #d8d4c8;          /* Bordes activos */
  --neutral-150: #e2ded2;          /* Bordes de input */
  --neutral-100: #ece9df;          /* Bordes / divisores */
  --neutral-75:  #f2efe6;          /* Fills sutiles */
  --crema: #f7f4ec;                /* Crema — superficie cálida */
  --crema-deep: #fbfaf6;           /* Crema muy claro — fondos de cabecera/página */
  --white: #ffffff;

  /* ---- Semánticos ---- */
  --color-success: #6bbf6b;
  --color-success-bg: #e8f5e8;
  --color-success-ink: #3a7a3a;
  --color-warning: #f7c90b;
  --color-warning-bg: #fdf3cf;
  --color-warning-ink: #9a7a00;
  --color-danger: #cf5b5b;
  --color-danger-bg: #fbeeee;
  --color-danger-ink: #a84444;
  --color-info: #0f8cea;
  --color-info-bg: #e8f3fd;

  /* ---- Superficies / texto (alias semánticos) ---- */
  --bg-page: #ffffff;
  --bg-warm: #f7f4ec;
  --surface-card: #ffffff;
  --surface-muted: #fbfaf6;
  --border-subtle: #ece9df;
  --border-strong: #e2ded2;
  --text-strong: #1a1a1a;
  --text-body: #3d3d3a;
  --text-muted: #5b5b57;
  --text-faint: #8a8a86;
  --text-label: #b9b6ac;
  --brand-primary: #0f8cea;
  --brand-accent: #f7c90b;
  --brand-support: #6bbf6b;

  /* Borde accesible para controles de formulario (WCAG 1.4.11, ≥3:1 sobre
     blanco/crema). El --border-strong del DS es demasiado claro para inputs;
     usamos un neutro cálido oscuro que sí alcanza el contraste no-textual. */
  --field-border: #736f64;

  /* ---- Tipografía ---- */
  --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

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

  /* ---- Radios (suaves, cálidos, nunca rectos) ---- */
  --radius-sm: 8px;      /* Chips, controles pequeños */
  --radius-md: 10px;     /* Inputs, botones */
  --radius-lg: 12px;     /* Cards, alerts */
  --radius-xl: 16px;     /* Paneles, cards grandes */
  --radius-2xl: 18px;    /* Hero cards, modales */
  --radius-pill: 999px;  /* Badges, pills, avatares */

  /* ---- Elevación (sombras bajas y cálidas) ---- */
  --shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.06);
  --shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.12);
  --shadow-card: 0 2px 10px rgba(26, 26, 26, 0.05);
  --shadow-pop: 0 8px 28px rgba(26, 26, 26, 0.16);
  --shadow-modal: 0 24px 60px rgba(26, 26, 26, 0.28);

  /* Anillo de foco */
  --focus-ring: 0 0 0 3px var(--comfacor-azul-100);
}