/* ===================================================================
 * COOPFALCAA — DESIGN TOKENS v4.0
 * Fuente de verdad: docs/DESIGN_SPEC.md §2.
 * Cualquier valor hardcoded en HTML/CSS que duplique un token de aquí
 * es drift y debe migrarse a var(--token).
 * =================================================================*/
:root {
    /* ---------- COLOR — paleta institucional ---------- */
    --brand-primary:        #51A371;  /* Verde Bosque */
    --brand-primary-deep:   #3D8559;  /* Verde Bosque profundo (texto, hover) */
    --brand-secondary:      #1B365D;  /* Azul Marino */
    --brand-secondary-deep: #122544;  /* Azul Marino profundo */
    --brand-accent:         #E9C46A;  /* Mostaza — sólo decorativo */
    --brand-accent-strong:  #B8860B;  /* Mostaza profundo — APTO para texto (4.5:1) */

    /* ---------- Superficies ---------- */
    --bg-main:        #F2F2F2;
    --bg-elevated:    #FAFAF9;
    --surface-white:  #FFFFFF;
    --surface-tint:   #F7FAF7;

    /* ---------- Texto ---------- */
    --text-main:    #1B365D;
    --text-muted:   #4A5568;
    --text-soft:    #6B7280;
    --text-inverse: #FFFFFF;

    /* ---------- Bordes ---------- */
    --border-light: #E5E7EB;
    --border-soft:  #EEF0F3;

    /* ---------- Estados ---------- */
    --danger:  #DC2626;
    --warning: #B45309;
    --success: #15803D;

    /* ---------- Pares badge bg/fg ---------- */
    --info-bg:    #DBEAFE;  --info-fg:    #1B365D;
    --success-bg: #DCFCE7;  --success-fg: #166534;
    --warning-bg: #FEF3C7;  --warning-fg: #92400E;
    --danger-bg:  #FEE2E2;  --danger-fg:  #991B1B;

    /* ---------- TIPOGRAFÍA ---------- */
    --font-sans: 'Open Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Escala modular 1.125 (Major Second) */
    --fs-xs:   0.75rem;   /* 12px — labels uppercase */
    --fs-sm:   0.875rem;  /* 14px — body secundario */
    --fs-base: 1rem;      /* 16px — body principal (mín. inputs) */
    --fs-lg:   1.125rem;  /* 18px */
    --fs-xl:   1.25rem;   /* 20px — H4 */
    --fs-2xl:  1.5rem;    /* 24px — H3 */
    --fs-3xl:  1.875rem;  /* 30px — H2 */
    --fs-4xl:  2.25rem;   /* 36px — H1 mobile */
    --fs-5xl:  3rem;      /* 48px — H1 desktop */
    --fs-6xl:  3.75rem;   /* 60px — display */

    /* ---------- ESPACIADO (base 4px) ---------- */
    --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
    --sp-5:  20px;  --sp-6:  24px;  --sp-8:  32px;  --sp-10: 40px;
    --sp-12: 48px;  --sp-16: 64px;  --sp-20: 80px;  --sp-24: 96px;

    /* ---------- RADIOS ---------- */
    --radius-sm:  0.5rem;    /* 8px — chips, badges, inputs filled */
    --radius-md:  0.75rem;   /* 12px — botones */
    --radius-lg:  1rem;      /* 16px — cards estándar */
    --radius-xl:  1.5rem;    /* 24px — cards premium, modales */
    --radius-2xl: 2rem;      /* 32px — sólo desktop */

    /* ---------- SOMBRAS ---------- */
    --sh-sm:    0 1px 2px rgba(0,0,0,0.05);
    --sh-md:    0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    --sh-lg:    0 10px 40px rgba(0,0,0,0.06);
    --sh-xl:    0 25px 50px -12px rgba(0,0,0,0.15);
    --sh-focus: 0 0 0 3px rgba(81,163,113,0.4);

    /* ---------- Z-INDEX ---------- */
    --z-dropdown: 10;
    --z-sticky:   20;
    --z-fixed:    30;
    --z-modal-bg: 50;
    --z-modal:    60;
    --z-toast:    70;

    /* ---------- ANIMACIÓN ---------- */
    --dur-fast:   120ms;
    --dur-normal: 200ms;
    --dur-slow:   300ms;
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- COMPATIBILIDAD HACIA ATRÁS ---------- */
    /* Estos alias mantienen funcionando el CSS pre-v4. NO usar en código nuevo. */
    --radius:     var(--radius-md);
    --transition: all var(--dur-normal) var(--ease-default);
}

/* ===================================================================
 * Tema oscuro — sólo si el dispositivo lo prefiere y el body no fuerza claro
 * =================================================================*/
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-main:       #1A202C;
        --bg-elevated:   #2D3748;
        --surface-white: #2D3748;
        --surface-tint:  #1F2A3A;
        --text-main:     #F7FAFC;
        --text-muted:    #CBD5E0;
        --text-soft:     #A0AEC0;
        --border-light:  rgba(255,255,255,0.1);
        --border-soft:   rgba(255,255,255,0.06);
    }
}

/* ===================================================================
 * Reset + base body
 * =================================================================*/
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font-sans);
    background-color: var(--bg-main);
    color: var(--text-main);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--dur-slow) var(--ease-default),
                color var(--dur-slow) var(--ease-default);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* Reduced motion — respeta preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}