/*
 * Design tokens — "Precision & Stability" (Google Stitch → docs/DESIGN.md).
 * Fuente única de color/tipografía/espaciado/formas del frontend. Se importa ANTES que
 * Bootstrap (CLAUDE §6) y mapea los tokens a variables CSS que conviven con Bootstrap
 * (sobrescribiendo sus --bs-* donde aplica). No usar valores hex sueltos en los componentes:
 * referenciar siempre estas variables.
 */

:root {
    /* ---- Superficies y texto ---- */
    --surface: #f7f9fb;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f2f4f6;
    --surface-container: #eceef0;
    --surface-container-high: #e6e8ea;
    --surface-variant: #e0e3e5;
    --on-surface: #191c1e;
    --on-surface-variant: #44474d;
    --surface-border: #e2e8f0;
    --zebra: #f8fafc;

    /* ---- Marca ---- */
    --primary: #000919;          /* near-black navy (texto/acentos fuertes) */
    --primary-container: #112135; /* Midnight Navy (institucional) */
    --on-primary: #ffffff;
    --on-primary-container: #7989a1;
    --primary-fixed: #d4e3ff;

    --secondary: #006876;        /* Professional Teal (acciones primarias) */
    --on-secondary: #ffffff;
    --secondary-container: #94edff;
    --on-secondary-container: #006d7b;
    --secondary-fixed-dim: #7ad4e5;
    --on-tertiary-container: #788a9f;
    --tertiary-fixed-dim: #b6c8df;

    /* ---- Estados de validación ---- */
    --success-green: #10b981;
    --warning-amber: #f59e0b;
    --error-red: #ef4444;
    --info-blue: #3b82f6;

    /* ---- Tipografía ---- */
    --font-display: 'Manrope', system-ui, sans-serif; /* titulares */
    --font-body: 'Inter', system-ui, sans-serif;      /* cuerpo, datos, labels */

    /* ---- Formas (soft, 4px base; nunca pill en botones/inputs) ---- */
    --radius-sm: 0.25rem;   /* inputs, checkboxes */
    --radius-md: 0.375rem;  /* botones, chips */
    --radius-lg: 0.5rem;    /* cards, modales */

    /* ---- Espaciado (base 8px) ---- */
    --space-base: 8px;
    --gutter: 24px;
    --container-max: 1280px;
    --margin-desktop: 40px;
    --margin-mobile: 16px;

    /* ---- Elevación (sombras difusas, tinte navy, baja opacidad) ---- */
    --shadow-card: 0 10px 25px -5px rgba(0, 9, 25, 0.06);
}

/*
 * El mapeo de tokens a las variables --bs-* de Bootstrap NO va aquí: este fichero se carga
 * ANTES que Bootstrap (CLAUDE §6) y sus :root --bs-* defaults ganarían. El override vive en
 * app.css, que se carga DESPUÉS de Bootstrap. Orden: design-tokens → bootstrap → app.css.
 */