/* ============================================================
   CSS Variables — Colegio Docksta
   Design tokens centralizados para consistencia visual
   ============================================================ */

:root {
    /* ── Colores Institucionales ─────────────────────────── */
    --color-verde          : #1e8449;   /* Verde principal */
    --color-verde-oscuro   : #145a32;   /* Verde hover / acentos */
    --color-verde-claro    : #d5f5e3;   /* Verde fondo suave */
    --color-azul-oscuro    : #1a2456;   /* Azul marino institucional */
    --color-azul           : #1a5276;   /* Azul medio */
    --color-azul-claro     : #d6eaf8;   /* Azul fondo suave */

    /* ── Grises ─────────────────────────────────────────── */
    --color-gris-100       : #f8f9fa;
    --color-gris-200       : #e9ecef;
    --color-gris-300       : #dee2e6;
    --color-gris-500       : #8a9099;
    --color-gris-700       : #495057;
    --color-gris-900       : #212529;

    /* ── Semánticos ─────────────────────────────────────── */
    --color-exito          : #27ae60;
    --color-advertencia    : #f39c12;
    --color-error          : #e74c3c;
    --color-info           : #2980b9;

    /* ── Texto ───────────────────────────────────────────── */
    --text-primary         : #1c2330;
    --text-secondary       : #4a5568;
    --text-muted           : #718096;
    --text-inverse         : #ffffff;

    /* ── Tipografía ─────────────────────────────────────── */
    --font-display         : 'Playfair Display', Georgia, serif;
    --font-body            : 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;

    --text-xs              : 0.75rem;    /*  12px */
    --text-sm              : 0.875rem;   /*  14px */
    --text-base            : 1rem;       /*  16px */
    --text-lg              : 1.125rem;   /*  18px */
    --text-xl              : 1.25rem;    /*  20px */
    --text-2xl             : 1.5rem;     /*  24px */
    --text-3xl             : 1.875rem;   /*  30px */
    --text-4xl             : 2.25rem;    /*  36px */
    --text-5xl             : 3rem;       /*  48px */

    /* ── Espaciado ───────────────────────────────────────── */
    --space-1              : 0.25rem;
    --space-2              : 0.5rem;
    --space-3              : 0.75rem;
    --space-4              : 1rem;
    --space-5              : 1.25rem;
    --space-6              : 1.5rem;
    --space-8              : 2rem;
    --space-10             : 2.5rem;
    --space-12             : 3rem;
    --space-16             : 4rem;
    --space-20             : 5rem;
    --space-24             : 6rem;

    /* ── Layout ─────────────────────────────────────────── */
    --container-max        : 1200px;
    --container-padding    : var(--space-6);

    /* ── Bordes ─────────────────────────────────────────── */
    --radius-sm            : 6px;
    --radius-md            : 10px;
    --radius-lg            : 16px;
    --radius-xl            : 24px;
    --radius-full          : 9999px;

    /* ── Sombras ─────────────────────────────────────────── */
    --shadow-sm            : 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md            : 0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
    --shadow-lg            : 0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
    --shadow-xl            : 0 20px 60px rgba(0,0,0,.15);
    --shadow-verde         : 0 8px 24px rgba(30,132,73,.25);

    /* ── Transiciones ────────────────────────────────────── */
    --transition-fast      : 150ms ease;
    --transition-base      : 250ms ease;
    --transition-slow      : 400ms ease;

    /* ── Z-index ─────────────────────────────────────────── */
    --z-dropdown           : 100;
    --z-header             : 200;
    --z-overlay            : 300;
    --z-modal              : 400;
    --z-toast              : 500;

    /* ── Header ──────────────────────────────────────────── */
    --header-height        : 80px;
    --topbar-height        : 36px;
}

/* Modo reducido de movimiento */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast  : 0ms;
        --transition-base  : 0ms;
        --transition-slow  : 0ms;
    }
}