/* TOKENS
   Las variables de color, forma y movimiento de toda la aplicacion. No hay
   ninguna regla aqui, solo los valores que el resto de archivos consume.*/
:root {
    --epion-dark: #0b1a2a;
    --epion-darker: #060e17;
    --epion-bg: #f4f6f9;
    --epion-primary: #1a3683;
    --epion-accent: #3DABF9;
    --epion-muted: #898cc4;
}
/* TOKENS */

:root {
    /* Paleta */
    --epion-brand: #1c8e89;
    --epion-brand-strong: #15706c;
    --epion-brand-soft: #e7f4f2;
    --epion-brand-ink: #0f5a56;

    /* Superficies */
    --epion-surface: #ffffff;
    --epion-surface-alt: #f4f9fa;
    --epion-line: #dde9ed;
    --epion-line-strong: #c2d7dc;

    /* Texto */
    --epion-text: #0f2434;
    --epion-text-soft: #5f7684;

    /* Estado */
    --epion-success: #12805c;
    --epion-danger: #c0392f;
    --epion-danger-hover: #9c2f26;

    --epion-warning: #c9811c;
    --epion-warning-ink: #8a5a0b;

    --epion-info: #9ad9ef;
    --epion-info-hover: #7fcde8;
    --epion-info-ink: #0b3a4a;

    /* Formas */
    --epion-radius-sm: 8px;
    --epion-radius: 12px;
    --epion-radius-lg: 20px;

    /* Foco y sombra */
    --epion-focus-ring: 0 0 0 4px rgba(42, 167, 156, 0.18);
    --epion-shadow-sm: 0 1px 2px rgba(15, 56, 68, 0.05), 0 1px 3px rgba(15, 56, 68, 0.07);
    --epion-shadow-md: 0 10px 30px rgba(15, 56, 68, 0.08);
    --epion-shadow-lg: 0 26px 60px rgba(15, 56, 68, 0.14);
    --epion-speed: 0.18s;
    --epion-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}