/* ============================================================================
 * _tokens.css — DESIGN TOKENS de CRC Warriors
 * ----------------------------------------------------------------------------
 * Single source of truth para colores, gradientes, sombras, radios y demás
 * variables de diseño del sistema.
 *
 * Sustituye a `theme-variables.css` (mismo contenido + paleta canónica nueva
 * + aliases). 100% retrocompatible: ningún token existente cambia de valor.
 *
 * Cargado desde header.php SIEMPRE (ANTES que cualquier otro CSS) para que
 * todas las páginas hereden los tokens.
 *
 * ----------------------------------------------------------------------------
 * ORGANIZACIÓN:
 *   1. PALETA CANÓNICA      — colores neutros + paleta all-blue (USAR ESTOS)
 *   2. SEMÁNTICOS           — aliases por uso (--color-text, --color-link...)
 *   3. ESTADOS              — success, warning, danger, info
 *   4. NEUTRALS             — texto, fondos, bordes
 *   5. GRADIENTES           — gradients definidos
 *   6. SOFT BACKGROUNDS     — fondos suaves para badges/alerts
 *   7. COMPONENT TOKENS     — radii, sombras, tokens de botón
 *   8. CAMPAIGN / STATUS    — colores específicos de UI
 *   9. LEGACY COMPAT        — nombres viejos (--color-teal, --color-violet,
 *                              --color-pink, etc.) para no romper archivos
 *                              existentes hasta que se refactoricen en su
 *                              grupo (G1/G2/G3). NO usar en código nuevo.
 *  10. DARK MODE            — overrides para [data-theme="dark"]
 *
 * ----------------------------------------------------------------------------
 * REGLAS PARA EL FUTURO REFACTOR:
 *
 *   ❌ NO escribir colores hardcoded (#3b82f6) en archivos individuales.
 *   ❌ NO redefinir un :root en una página para sobrescribir tokens globales.
 *   ✅ SÍ usar las variables canónicas: var(--color-blue-500), var(--color-text).
 *   ✅ SÍ ampliar este archivo si hace falta un token nuevo.
 *
 *   Los aliases legacy (sección 9) son temporales. Cuando un archivo se
 *   refactorice en su grupo, sustituir:
 *     var(--color-violet)  →  var(--color-blue-500)
 *     var(--color-teal)    →  var(--color-blue-500)
 *     var(--color-pink)    →  var(--color-blue-400)
 *     var(--bg-violet-soft) → var(--bg-blue-soft)
 *     var(--bg-teal-soft)   → var(--bg-blue-soft)
 *     var(--bg-pink-soft)   → var(--bg-blue-soft)
 *
 *   Cuando ningún archivo use ya los nombres legacy, eliminamos la sección 9.
 * ============================================================================
 */


/* ===========================================================================
 * 1. PALETA CANÓNICA — paleta all-blue (la oficial post-migración abr-2026)
 *    USAR ESTOS NOMBRES en todo código nuevo y refactorizado.
 * =========================================================================== */
:root {
    /* Azules — del más oscuro al más claro */
    --color-navy:        #002855;   /* heading sobre blanco, énfasis máximo */
    --color-blue-900:    #003d7a;
    --color-blue-700:    #0056a3;   /* link / acción primaria */
    --color-blue-500:    #2563eb;   /* CTA principal */
    --color-blue-400:    #3b82f6;   /* acción secundaria */
    --color-blue-300:    #60a5fa;
    --color-blue-200:    #93c5fd;
    --color-blue-100:    #dbeafe;
    --color-blue-50:     #eff6ff;
    --color-sky:         #0284c7;   /* info / variante alterna */
    --color-cyan:        #0ea5e9;

    /* Grises — del más oscuro al más claro */
    --color-slate-900:   #0f172a;
    --color-slate-800:   #1e293b;
    --color-slate-700:   #334155;
    --color-slate-600:   #475569;
    --color-slate-500:   #64748b;
    --color-slate-400:   #94a3b8;
    --color-slate-300:   #cbd5e1;
    --color-slate-200:   #e2e8f0;
    --color-slate-100:   #f1f5f9;
    --color-slate-50:    #f8fafc;
    --color-white:       #ffffff;
    --color-black:       #0f172a;   /* "negro" funcional, no #000 */


/* ===========================================================================
 * 2. SEMÁNTICOS — usar por intención, no por color
 * =========================================================================== */
    --color-primary:        var(--color-blue-500);   /* acción principal */
    --color-primary-hover:  var(--color-blue-700);
    --color-primary-soft:   var(--color-blue-50);
    --color-secondary:      var(--color-blue-400);

    --color-link:           var(--color-blue-700);
    --color-link-hover:     var(--color-navy);

    --color-heading:        var(--color-navy);


/* ===========================================================================
 * 3. ESTADOS — success / warning / danger / info
 *    Estos son los ÚNICOS no-azules permitidos en código nuevo. Su semántica
 *    está vinculada al estado, no a "decoración".
 * =========================================================================== */
    --color-success:        #059669;
    --color-success-soft:   #d1fae5;
    --color-success-dark:   #065f46;

    --color-warning:        #d97706;
    --color-warning-soft:   #fef3c7;
    --color-warning-dark:   #92400e;

    --color-danger:         #dc2626;
    --color-danger-soft:    #fee2e2;
    --color-danger-dark:    #991b1b;

    --color-info:           var(--color-sky);
    --color-info-soft:      var(--color-blue-50);
    --color-info-dark:      var(--color-blue-700);


/* ===========================================================================
 * 4. NEUTRALS — texto, fondos, bordes
 *    Contraste endurecido (22-abr-2026, iter. 2): los grises secundarios se
 *    oscurecieron tras feedback del usuario para que los textos secundarios
 *    se lean prácticamente como texto principal. Referencia visual: PubMed.
 *
 *    Ratios sobre fondo blanco:
 *      primary   (15:1) — texto principal
 *      secondary (15:1) — texto secundario, casi negro
 *      muted     (10:1) — texto "atenuado" pero sigue muy legible
 *      dark      (18:1) — énfasis máximo
 * =========================================================================== */
    --text-primary:        #1e293b;     /* texto principal */
    --text-secondary:      #1f2937;     /* casi negro - alta legibilidad */
    --text-muted:          #334155;     /* atenuado pero oscuro */
    --text-dark:           #111827;     /* énfasis máximo */

    --bg-body:             #f8fafc;
    --bg-card:             #ffffff;
    --bg-subtle:           #f1f5f9;
    --bg-light:            #f8fafc;
    --border-color:        #e2e8f0;
    --border-light:        #f1f5f9;
    --border:              var(--border-color);


/* ===========================================================================
 * 5. GRADIENTES
 *    Los gradientes existentes se mantienen para no romper páginas. Los nuevos
 *    se construyen con la paleta all-blue.
 * =========================================================================== */
    --gradient-hero:       linear-gradient(135deg, rgba(0, 86, 163, 0.75) 0%, rgba(59, 130, 246, 0.75) 50%, rgba(96, 165, 250, 0.75) 100%);
    --gradient-blue:       linear-gradient(135deg, var(--color-navy), var(--color-blue-500));
    --gradient-blue-soft:  linear-gradient(135deg, var(--color-blue-700), var(--color-blue-400));
    --gradient-donate:     linear-gradient(135deg, var(--color-warning), var(--color-danger));

    /* Aliases legacy (gradientes que aún usan nombres viejos) */
    --gradient-primary:    linear-gradient(135deg, var(--color-blue-500), var(--color-blue-700));
    --gradient-member:     linear-gradient(135deg, var(--color-blue-500), var(--color-navy));
    --gradient-research:   linear-gradient(135deg, var(--color-blue-400), var(--color-blue-900));
    --gradient-cta:        linear-gradient(-45deg, var(--color-blue-700), var(--color-blue-900), var(--color-blue-400), var(--color-blue-500));
    --gradient-card-teal:  linear-gradient(135deg, var(--color-blue-500), var(--color-cyan));
    --gradient-card-amber: linear-gradient(135deg, var(--color-warning), var(--color-danger));
    --gradient-card-violet: linear-gradient(135deg, var(--color-blue-400), var(--color-blue-900));


/* ===========================================================================
 * 6. SOFT BACKGROUNDS — fondos suaves para badges/alerts/cards
 * =========================================================================== */
    --bg-blue-soft:        #eff6ff;
    --bg-blue-softer:      #f0f9ff;
    --bg-green-soft:       #d1fae5;
    --bg-amber-soft:       #fef3c7;
    --bg-red-soft:         #fee2e2;


/* ===========================================================================
 * 7. COMPONENT TOKENS — radii, sombras, botones
 * =========================================================================== */
    --radius-sm:           8px;
    --radius-md:           12px;
    --radius-lg:           16px;
    --radius-xl:           20px;
    --radius-pill:         50px;
    --radius-btn:          14px;
    --radius:              var(--radius-md);

    --shadow-sm:           0 2px 8px rgba(0,0,0,0.04);
    --shadow-md:           0 4px 20px rgba(0,0,0,0.06);
    --shadow-lg:           0 8px 30px rgba(0,0,0,0.08);
    --shadow-xl:           0 15px 40px rgba(0,0,0,0.12);
    --shadow-blue:         0 8px 30px rgba(0, 40, 85, 0.12);
    --shadow:              var(--shadow-md);

    --btn-primary-bg:      var(--gradient-donate);
    --btn-primary-text:    #ffffff;
    --btn-secondary-bg:    var(--gradient-member);
    --btn-secondary-text:  #ffffff;
    --btn-outline-border:  var(--border-color);
    --btn-outline-text:    var(--text-primary);


/* ===========================================================================
 * 8. CAMPAIGN / STATUS BADGES — UI específica
 * =========================================================================== */
    --campaign-progress-bg:  var(--gradient-donate);
    --campaign-urgent-bg:    var(--bg-red-soft);
    --campaign-urgent-text:  var(--color-danger);

    --status-active-bg:      var(--bg-green-soft);
    --status-active-text:    var(--color-success-dark);
    --status-pending-bg:     var(--bg-amber-soft);
    --status-pending-text:   var(--color-warning-dark);
    --status-draft-bg:       var(--bg-subtle);
    --status-draft-text:     var(--text-muted);
    --status-paused-bg:      var(--bg-amber-soft);
    --status-paused-text:    var(--color-warning-dark);
    --status-rejected-bg:    var(--bg-red-soft);
    --status-rejected-text:  var(--color-danger-dark);


/* ===========================================================================
 * 9. LEGACY COMPAT — nombres viejos para no romper archivos sin refactorizar
 *    ⚠️  NO USAR en código nuevo. Estos nombres se eliminarán cuando ningún
 *    archivo los use ya. Durante el refactor por grupo, sustituir por sus
 *    equivalentes canónicos (ver sección de "REGLAS" arriba).
 *
 *    Valores idénticos a los del antiguo theme-variables.css → cero regresión.
 * =========================================================================== */
    /* Brand colors (antiguos) */
    --color-teal:          #0d9488;
    --color-teal-light:    #14b8a6;
    --color-teal-dark:     #065f46;

    --color-violet:        #8b5cf6;
    --color-violet-light:  #a78bfa;
    --color-violet-dark:   #7c3aed;

    --color-pink:          #ec4899;
    --color-pink-light:    #f472b6;

    --color-amber:         var(--color-warning);
    --color-amber-light:   #fbbf24;
    --color-amber-dark:    var(--color-warning);

    --color-blue:          var(--color-blue-400);
    --color-blue-light:    var(--color-blue-300);
    --color-blue-dark:     #1d4ed8;

    --color-green:         #10b981;
    --color-green-light:   #34d399;
    --color-green-dark:    var(--color-success);

    --color-red:           #ef4444;
    --color-red-light:     #fca5a5;
    --color-red-dark:      var(--color-danger);

    /* Soft backgrounds antiguos */
    --bg-teal-soft:        #f0fdfa;
    --bg-violet-soft:      #ede9fe;
    --bg-pink-soft:        #fce7f3;
}


/* ===========================================================================
 * 10. DARK MODE — overrides para [data-theme="dark"]
 * =========================================================================== */
[data-theme="dark"] {
    /* Texto */
    --text-primary:        #f1f5f9;
    --text-secondary:      #e2e8f0;
    --text-muted:          #cbd5e1;
    --text-dark:           #f8fafc;

    /* Fondos */
    --bg-body:             #0f172a;
    --bg-card:             #1e293b;
    --bg-subtle:           #334155;
    --bg-light:            #1e293b;
    --border-color:        #334155;
    --border-light:        #1e293b;

    /* Soft backgrounds (versiones oscuras) */
    --bg-blue-soft:        #1e3a5f;
    --bg-green-soft:       #064e3b;
    --bg-amber-soft:       #78350f;
    --bg-red-soft:         #7f1d1d;
    --bg-teal-soft:        #064e3b;
    --bg-violet-soft:      #312e81;
    --bg-pink-soft:        #831843;

    /* Sombras más profundas en dark mode */
    --shadow-sm:           0 2px 8px rgba(0,0,0,0.2);
    --shadow-md:           0 4px 20px rgba(0,0,0,0.3);
    --shadow-lg:           0 8px 30px rgba(0,0,0,0.4);
    --shadow-blue:         0 8px 30px rgba(0,0,0,0.5);
}