/*
 * tokens.css — Design System: "O Jardim dos Pequenos"
 * Fonte única de verdade para todas as variáveis do tema.
 * Nunca editar valores de cor/sombra fora deste arquivo.
 */

:root {

    /* ── Cores principais ─────────────────────────────────── */
    --blue:          #1B6FD8;
    --blue-dark:     #0F4FA8;
    --blue-shadow:   #0A3A80;
    --yellow:        #FFBE00;
    --yellow-dark:   #C48F00;
    --green:         #2EAA6E;
    --green-light:   #EBF7F0;

    /* ── Superfícies e texto ──────────────────────────────── */
    --bg:            #F4F8FF;
    --card:          #FFFFFF;
    --ink:           #1A2340;
    --ink-muted:     #5A6785;
    --surface-low:   #E8EFFC;

    /* ── Cores dos cards de vantagem (perks) ─────────────── */
    --perk-frete-bg:     #DDEEFF;
    --perk-frete-shadow: #A8C8F0;
    --perk-frete-icon:   #1B6FD8;

    --perk-pix-bg:       #FFF3CC;
    --perk-pix-shadow:   #E8D080;
    --perk-pix-icon:     #C48F00;

    --perk-parcela-bg:   #D6F0E4;
    --perk-parcela-shadow: #90CCA8;
    --perk-parcela-icon: #2EAA6E;

    --perk-12x-bg:       #D4F2F0;
    --perk-12x-shadow:   #88CCC8;
    --perk-12x-icon:     #0E9490;

    --perk-seguro-bg:    #FFE5DC;
    --perk-seguro-shadow: #F0A898;
    --perk-seguro-icon:  #D95F3B;

    /* ── Border-radius ───────────────────────────────────── */
    --r-pill:        9999px;
    --r-card:        1.5rem;
    --r-card-tl:     2rem;
    --r-perk:        1.25rem;
    --r-faq:         1.25rem;
    --r-img:         1.1rem;

    /* ── Sombras sólidas flat (assinatura visual) ────────── */
    --shadow-card:       0 4px 0 #C8D8F0;
    --shadow-hover:      0 7px 0 #A0BAEA, 0 10px 24px rgba(27,111,216,.12);
    --shadow-btn-blue:   0 5px 0 var(--blue-dark);
    --shadow-btn-yellow: 0 5px 0 var(--yellow-dark);
    --shadow-faq:        0 3px 0 var(--surface-low);
    --shadow-faq-open:   0 5px 0 #A0BAEA;
}