/* =========================================================================
   facturaonline — Design tokens
   Paleta contenida y profesional: neutros (slate) + 1 azul de marca +
   1 verde de acento usado con moderación. Sin recargas de color.
   ========================================================================= */

:root {
    /* --- Color de marca --- */
    --brand:        #1f56e3;   /* azul principal */
    --brand-600:    #1b4bc7;
    --brand-700:    #163ba0;   /* hover / textos sobre claro */
    --brand-tint:   #eef3ff;   /* fondo muy claro de marca */
    --brand-tint-2: #dfe8ff;

    /* --- Acento (uso puntual: checks, éxito, QR) --- */
    --accent:       #0ea371;
    --accent-tint:  #e7f7f0;

    /* --- Neutros (slate) --- */
    --ink:          #0f172a;   /* titulares */
    --body:         #334155;   /* texto normal */
    --muted:        #64748b;   /* texto secundario */
    --faint:        #94a3b8;
    --line:         #e6eaf0;   /* bordes */
    --line-strong:  #d3dae4;
    --bg:           #ffffff;
    --bg-soft:      #f7f9fc;   /* secciones alternas */
    --bg-dark:      #0d1424;   /* footer / franjas oscuras */
    --white:        #ffffff;

    /* --- Estados --- */
    --warn:         #b7791f;
    --warn-tint:    #fdf3e0;
    --danger:       #c0392b;   /* errores de formulario y avisos graves */
    --danger-tint:  #fdecec;
    --danger-line:  #f6c9c6;

    /* --- Sobre fondo oscuro ---
       La misma escala de arriba (principal → secundario → terciario), pero pensada
       para leerse sobre `--bg-dark`: pie, franja de CTA y tarjeta de código. Se
       mantiene corta a propósito; antes de añadir un tono más, mirar si sirve alguno. */
    --on-dark:        #ffffff;               /* titulares y texto destacado */
    --on-dark-soft:   #cdd6e6;               /* texto normal */
    --on-dark-muted:  #9fb0cc;               /* secundario */
    --on-dark-faint:  #6f81a1;               /* terciario (legales del pie, comentarios) */
    --on-dark-line:   rgba(255,255,255,.08);
    --on-dark-veil:   rgba(255,255,255,.03); /* realce sutil de una zona */
    --brand-on-dark:  #7aa2ff;               /* el azul de marca, aclarado para contrastar */
    --accent-on-dark: #8fe3b0;
    --dot-on-dark:    #3b465e;               /* adornos apagados (puntos de la barra) */

    /* --- Tipografía --- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji";
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                 "Liberation Mono", monospace;

    /* Escala tipográfica (fluida) */
    --fs-hero:  clamp(2.1rem, 1.4rem + 3vw, 3.4rem);
    --fs-h2:    clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
    --fs-h3:    clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
    --fs-lead:  clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
    --fs-body:  1rem;
    --fs-sm:    0.9rem;
    --fs-xs:    0.8rem;

    /* --- Espaciado --- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    /* --- Radios --- */
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    /* --- Sombras (sutiles) --- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow:    0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.12);

    /* --- Layout --- */
    --container: 1160px;
    --container-narrow: 820px;

    /* --- Transiciones --- */
    --t-fast: 120ms ease;
    --t:      200ms ease;
}