/* ==========================================================================
   EBF PIBVP — Design Tokens (Identidade "PIBVP Kids")
   Paleta alegre: azul-céu vibrante, amarelo ensolarado e laranja, com fontes
   arredondadas (Baloo 2 / Nunito), cantos generosos e botões "3D".

   Estratégia de tema:
   - :root              → valores do tema CLARO (padrão).
   - :root[data-theme="dark"] → valores do tema ESCURO (fonte única).
   O JavaScript define data-theme no carregamento, detectando a preferência
   do sistema quando o usuário ainda não escolheu.
   ========================================================================== */

:root {
    /* ---- Marca: azul Kids ---------------------------------------------- */
    --ebf-primary: #14a9e8;
    --ebf-primary-dark: #0f8fcc;
    --ebf-primary-darker: #0b6fa3;
    --ebf-primary-soft: #e2f5fd;

    /* ---- Laranja (ação de destaque) ------------------------------------ */
    --ebf-accent: #f7941e;
    --ebf-accent-dark: #df7d0c;
    --ebf-accent-soft: #fff0db;

    /* ---- Amarelo ensolarado (segunda ação lúdica) ---------------------- */
    --ebf-yellow: #fdc82f;
    --ebf-yellow-dark: #e6ac10;
    --ebf-yellow-soft: #fff6da;

    /* ---- Estados -------------------------------------------------------- */
    --ebf-success: #34b56a;
    --ebf-success-dark: #2a9657;
    --ebf-success-soft: #e3f7ec;
    --ebf-warning: #f7941e;
    --ebf-warning-soft: #fff0db;
    --ebf-danger: #ef5b5b;
    --ebf-danger-dark: #d84444;
    --ebf-danger-soft: #fde7e7;
    --ebf-info: #14a9e8;
    --ebf-info-soft: #e2f5fd;

    /* ---- Superfícies / Texto ------------------------------------------- */
    --ebf-bg: #def2fc;
    --ebf-bg-vivid: #15a9e8;
    --ebf-bg-tint: rgba(20, 169, 232, .12);
    --ebf-surface: #ffffff;
    --ebf-surface-2: #f1f9fe;
    --ebf-ink: #173a4d;
    --ebf-ink-soft: #3c5868;
    --ebf-muted: #6a8493;
    --ebf-border: #d6ebf6;
    --ebf-border-strong: #bcdcec;

    /* ---- Sombras (claro, leve tom azul) -------------------------------- */
    --ebf-shadow-xs: 0 1px 2px rgba(11, 111, 163, .08);
    --ebf-shadow-sm: 0 4px 12px rgba(11, 111, 163, .10);
    --ebf-shadow: 0 10px 28px rgba(11, 111, 163, .16);
    --ebf-shadow-lg: 0 22px 50px rgba(11, 111, 163, .22);
    --ebf-shadow-focus: 0 0 0 4px rgba(20, 169, 232, .30);

    /* ---- Tipografia ----------------------------------------------------- */
    --ebf-font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --ebf-font-display: "Baloo 2", "Nunito", system-ui, sans-serif;
    --ebf-fs-xs: .8rem;
    --ebf-fs-sm: .9rem;
    --ebf-fs-base: 1rem;
    --ebf-fs-lg: 1.15rem;
    --ebf-lh-tight: 1.15;
    --ebf-lh-base: 1.6;

    /* ---- Espaçamento (escala 4px) -------------------------------------- */
    --ebf-space-1: .25rem;
    --ebf-space-2: .5rem;
    --ebf-space-3: .75rem;
    --ebf-space-4: 1rem;
    --ebf-space-5: 1.5rem;
    --ebf-space-6: 2rem;
    --ebf-space-7: 3rem;

    /* ---- Raios (generosos = lúdico) ------------------------------------ */
    --ebf-radius-sm: 12px;
    --ebf-radius: 18px;
    --ebf-radius-lg: 26px;
    --ebf-radius-pill: 999px;

    /* ---- Transições / Layout ------------------------------------------- */
    --ebf-transition: .18s cubic-bezier(.34, 1.4, .64, 1);
    --ebf-shell-max: 1200px;
    --ebf-navbar-h: 66px;

    color-scheme: light;
}

/* ---- Tema escuro (azul-noite, mantém o espírito alegre) ---------------- */
:root[data-theme="dark"] {
    --ebf-primary: #3cbcf5;
    --ebf-primary-dark: #1f9fdc;
    --ebf-primary-darker: #1782b8;
    --ebf-primary-soft: #143a4d;

    --ebf-accent: #ffa53d;
    --ebf-accent-dark: #e68a1f;
    --ebf-accent-soft: #3a2a14;

    --ebf-yellow: #ffd75a;
    --ebf-yellow-dark: #e6bd3a;
    --ebf-yellow-soft: #38300f;

    --ebf-success: #46c97e;
    --ebf-success-dark: #36a866;
    --ebf-success-soft: #143323;
    --ebf-warning: #ffa53d;
    --ebf-warning-soft: #3a2a14;
    --ebf-danger: #f77878;
    --ebf-danger-dark: #e35d5d;
    --ebf-danger-soft: #3a1f1f;
    --ebf-info: #3cbcf5;
    --ebf-info-soft: #143a4d;

    --ebf-bg: #0c2230;
    --ebf-bg-vivid: #0f3a52;
    --ebf-bg-tint: rgba(60, 188, 245, .10);
    --ebf-surface: #123246;
    --ebf-surface-2: #173c52;
    --ebf-ink: #e7f3fa;
    --ebf-ink-soft: #c3d7e3;
    --ebf-muted: #8aa6b6;
    --ebf-border: #20465d;
    --ebf-border-strong: #2c5670;

    --ebf-shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --ebf-shadow-sm: 0 4px 12px rgba(0, 0, 0, .45);
    --ebf-shadow: 0 10px 28px rgba(0, 0, 0, .5);
    --ebf-shadow-lg: 0 22px 50px rgba(0, 0, 0, .6);
    --ebf-shadow-focus: 0 0 0 4px rgba(60, 188, 245, .4);

    color-scheme: dark;
}