/*
 * brand.css — Tokens de identidad del proyecto
 * ─────────────────────────────────────────────────────────────────────────
 * ÚNICO ARCHIVO QUE CAMBIA ENTRE PROYECTOS.
 *
 * Para reutilizar la plantilla en un proyecto nuevo:
 *   1. Cambiar los colores primarios en §1.
 *   2. Cambiar la fuente en §2 si aplica (actualizar también la URL
 *      en layouts/app.blade.php si se cambia Google Fonts).
 *   3. Todo lo demás (confia.css, cp-tables.css, cp-forms.css,
 *      cp-classic-form.css, persona.css, etc.) se adapta automáticamente
 *      porque consumen var(--cp-*) definidos aquí.
 *
 * Convención de los tokens primarios:
 *   --cp-navy    → oscuro principal   (topbar, headers tabla, títulos H1)
 *   --cp-blue    → primario activo    (botones CTA, links, estado activo nav)
 *   --cp-blue-d  → primario hover     (hover de botones y links)
 *   --cp-blue-xl → primario muy suave (fondos de badge, hover de fila)
 *   --cp-green   → éxito / confirmación
 *   --cp-green-l → éxito suave        (fondo de badge activo)
 *
 * Ejemplo para un proyecto de salud con paleta verde-teal:
 *   --cp-navy:    #0d4f3c;
 *   --cp-blue:    #0d9488;
 *   --cp-blue-d:  #0f766e;
 *   --cp-blue-xl: #f0fdfa;
 *   --cp-green:   #16a34a;
 *   --cp-green-l: #dcfce7;
 * ─────────────────────────────────────────────────────────────────────────
 */

:root {

    /* ══ §1 — Colores primarios de la marca ═══════════════════════════════
       Cambiar estos 6 valores transforma toda la interfaz.             */
    --cp-navy:    #0b396b;
    --cp-blue:    #2985f5;
    --cp-blue-d:  #1a6fe0;
    --cp-blue-xl: #ebf4ff;
    --cp-green:   #3da529;
    --cp-green-l: #eaf7e4;

    /* ══ §2 — Tipografía ══════════════════════════════════════════════════
       Cambiar "Poppins" por otra Google Font y actualizar el @import
       en layouts/app.blade.php.                                        */
    --font-base:      "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-base: 13.5px;

    /* ══ §3 — Colores semánticos ══════════════════════════════════════════
       Rara vez cambian entre proyectos — son semántica universal.      */
    --cp-orange:   #d4890a;
    --cp-orange-l: #fef0e6;
    --cp-red:      #c0392b;
    --cp-red-l:    #fdedec;
    --cp-purple:   #5b2c8d;
    --cp-purple-l: #f0eafb;

    /* ══ §4 — Bootstrap hereda la paleta ══════════════════════════════════
       No editar estos valores directamente — referencian los tokens §1.
       Si cambia --cp-blue, Bootstrap primary cambia automáticamente.
       Solo actualizar los valores *-rgb si cambia el hex de §1.       */
    --bs-primary:          var(--cp-blue);
    --bs-primary-rgb:      41, 133, 245;
    --bs-secondary:        #475569;
    --bs-secondary-rgb:    71, 85, 105;
    --bs-success:          var(--cp-green);
    --bs-success-rgb:      61, 165, 41;
    --bs-danger:           var(--cp-red);
    --bs-danger-rgb:       192, 57, 43;
    --bs-warning:          var(--cp-orange);
    --bs-warning-rgb:      212, 137, 10;
    --bs-info:             var(--cp-blue);
    --bs-info-rgb:         41, 133, 245;
    --bs-link-color:       var(--cp-blue);
    --bs-link-hover-color: var(--cp-blue-d);
    --bs-focus-ring-color: rgba(41, 133, 245, 0.25);
    --bs-body-font-family: var(--font-base);
    --bs-body-color:       #1e293b;
    --bs-border-color:     #b8c4cf;
    --bs-border-radius:    6px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 8px;
}