/* =============================================================================
 * Partes IBAVI — tokens de diseño (exportados de Stitch, docs/DESIGN.md).
 * Fuente única de la identidad visual; se carga ANTES de Bootstrap (CLAUDE.md §6).
 * Los componentes consumen estas variables; no repitas literales de color en el CSS.
 * ========================================================================== */

:root {
    /* ── Superficies y texto (Material tonal) ───────────────────────────────── */
    --surface: #faf8ff;
    --surface-dim: #d8d9e5;
    --surface-bright: #faf8ff;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f2f3ff;
    --surface-container: #ecedf9;
    --surface-container-high: #e6e7f3;
    --surface-container-highest: #e1e2ee;
    --on-surface: #191b24;
    --on-surface-variant: #424655;
    --inverse-surface: #2d3039;
    --inverse-on-surface: #eff0fc;
    --outline: #727787;
    --outline-variant: #c2c6d8;
    --background: #faf8ff;
    --on-background: #191b24;

    /* ── Marca ──────────────────────────────────────────────────────────────── */
    --primary: #0057cd;
    --on-primary: #ffffff;
    --primary-container: #0d6efd;
    --on-primary-container: #ffffff;
    --secondary: #575f67;
    --on-secondary: #ffffff;
    --secondary-container: #d8e1ea;
    --tertiary: #a63b00;
    --on-tertiary: #ffffff;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;

    /* ── Colores de estado de incidencia (indicador operacional primario) ───── */
    --status-received: #adb5bd;   /* recibida / en revisión — gris */
    --status-assigned: #0d6efd;   /* asignada — azul */
    --status-progress: #198754;   /* en curso — verde */
    --status-blocked: #ffbf00;    /* bloqueada — ámbar (alta visibilidad) */
    --status-signature: #6f42c1;  /* pendiente firma — violeta */
    --status-completed: #064e3b;  /* firmada/certificada/facturada — verde bosque */
    --status-urgent: #dc3545;     /* urgente — rojo, siempre visible */

    /* ── Tipografía ─────────────────────────────────────────────────────────── */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* Escala (docs/DESIGN.md · typography) */
    --fs-headline-lg: 32px;  --fw-headline-lg: 700;
    --fs-headline-md: 24px;  --fw-headline-md: 600;
    --fs-body-lg: 18px;      /* PWA: base para descripciones (uso con sol) */
    --fs-body-md: 14px;      /* Desktop: tablas densas */
    --fs-body-sm: 12px;
    --fs-label-caps: 11px;   --fw-label-caps: 700; --ls-label-caps: 0.05em;

    /* ── Radios ─────────────────────────────────────────────────────────────── */
    --radius-sm: 0.125rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-full: 9999px;

    /* ── Espaciado / layout ─────────────────────────────────────────────────── */
    --pwa-margin: 1rem;
    --pwa-gutter: 1rem;
    --desktop-sidebar-width: 260px;
    --desktop-gutter: 0.5rem;
    --touch-target-min: 48px;   /* mínimo táctil (guantes/movimiento) */

    /* ── Puente con Bootstrap (variables --bs-*) ────────────────────────────── */
    --bs-primary: var(--primary);
    --bs-body-bg: var(--background);
    --bs-body-color: var(--on-background);
    --bs-body-font-family: var(--font-sans);
    --bs-border-radius: var(--radius);
    --bs-link-color: var(--primary);
}