/* ============================================================================
   tokens.css — Sistema de diseño (custom properties)
   Colegio Albert Einstein
   ============================================================================ */

:root,
[data-theme="light"] {
    /* Colores de marca */
    --color-primary: #004aad;
    --color-primary-hover: #003a8c;
    --color-secondary: #01aded;
    --color-secondary-hover: #008fc4;
    --color-accent-red: #e30914;
    --color-accent-gold: #c2975c;

    /* Neutros — Light (alineados con la paleta de marca: navy/celeste desaturado en vez de gris neutro) */
    --color-bg: #ffffff;
    --color-bg-alt: #eef4fb;              /* tinte celeste muy suave */
    --color-surface: #ffffff;
    --color-surface-elevated: #ffffff;
    --color-border: #d4dff0;              /* azul claro muy desaturado */
    --color-text: #0b1a33;                /* navy profundo derivado del primario */
    --color-text-muted: #3d4f6e;          /* navy desaturado — reemplaza al gris neutro */
    --color-text-inverse: #ffffff;

    /* Estados */
    --color-success: #16a34a;
    --color-warning: #f59e0b;
    --color-error: #e30914;

    /* Tipografía */
    --font-heading: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.875rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 3rem;
    --fs-5xl: 3.75rem;

    --fw-regular: 400;
    --fw-semibold: 600;
    --fw-bold: 700;

    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.75;

    /* Espaciado — escala 4px */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 6rem;
    --space-16: 8rem;

    /* Radios */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

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

    /* Layout */
    --container-max: 1200px;
    --container-narrow: 720px;
    --header-height: 72px;

    /* Z-index */
    --z-header: 100;
    --z-float: 900;
    --z-modal: 1000;
}

[data-theme="dark"] {
    /* Neutros — Dark con tintes navy */
    --color-bg: #0b1020;
    --color-bg-alt: #121a30;
    --color-surface: #16213d;
    --color-surface-elevated: #1d2a4a;
    --color-border: #2a3654;
    --color-text: #f1f4fa;
    --color-text-muted: #a8b9d6;          /* celeste desaturado para modo oscuro */
    --color-text-inverse: #0b1a33;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}