/* ============================================================
   Tokens · paleta + tipografia + spacing
   ------------------------------------------------------------
   Base alinhada ao tema da loja (auditoria em LP-DESIGN-AUDIT.md):
   - Tipografia: Poppins única (loja sobrescreve com `* { font-family: Poppins }`)
   - Paleta: preto puro + branco + skin tones (#f5e6d3, #fbf3ea, #ecd4b8)
   - Acentos rose/champagne/wine NÃO existem na loja — removidos
   ============================================================ */

:root {
    /* === Tinta / preto === */
    --ink:        #000000;   /* primary da loja */
    --ink-soft:   #222222;   /* hover do primary */
    --ink-muted:  #666666;   /* font-light da loja */
    --ink-mute:   #7a7a7a;   /* WCAG AA fix (era #999, contraste 2.85 sobre branco) */

    /* === Skin tones (já presentes na loja, footer/smartfilter) === */
    --skin:       #f5e6d3;   /* base */
    --skin-soft:  #fbf3ea;   /* fundo suave */
    --skin-deep:  #ecd4b8;   /* hover/borda/eyebrow */

    /* === Neutros === */
    --white:        #ffffff;
    --white-warm:   #fafafa;
    --border:       #e8e8e8;
    --border-soft:  #f0f0f0;

    /* === Status === */
    --success:    #1f6f3f;   /* mesmo verde do badge "economize" no buy-together */
    --error:      #dd0000;   /* tag_bg_discount da loja */

    /* === Tipografia · Poppins (base) + Caveat (handwriting, acentos) === */
    --font-poppins: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-script:  'Caveat', 'Brush Script MT', cursive;

    /* === Acentos warm (rose-vinho discreto, fora do rosa pink) ===
       --ink-warm:      saturado, usado em "Venda!" e underline (alta presença)
       --ink-warm-soft: translúcido, usado em "Sua/seu/sua" (acompanhamento poético) */
    --ink-warm:      #9a3940;
    --ink-warm-soft: rgba(154, 57, 64, .42);

    /* === Spacing (escala 8) === */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-8:  48px;
    --space-10: 64px;
    --space-12: 96px;
    --space-14: 128px;

    /* === Radius (escala da loja: 4 | 6 | 8 | 12 | 16 | 24/full) === */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 999px;

    /* === Shadow (escala reescalada, 3 níveis claramente distintos) === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .06);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .10);
    --shadow-xl: 0 24px 64px -12px rgba(0, 0, 0, .18);   /* dramatic, cards elevados */

    /* === Layout === */
    --container:        1120px;
    --container-narrow:  720px;

    /* === Animation ===
       --easing geral: linear-out (UI states)
       --easing-out: overshoot suave (transforms de elevação) */
    --easing:        cubic-bezier(.4, 0, .2, 1);
    --easing-out:    cubic-bezier(.2, .8, .2, 1);
    --transition:           .2s var(--easing);
    --transition-transform: .25s var(--easing-out);

    /* === Header altura === */
    --header-h: 64px;

    /* === Focus rings (WCAG 2.4.7) ===
       --focus-ring-light: fundos claros (skin-soft, white)
       --focus-ring-dark:  fundos escuros (ink, FAB verde) */
    --focus-ring-light: 0 0 0 2px var(--ink), 0 0 0 5px rgba(0, 0, 0, .12);
    --focus-ring-dark:  0 0 0 2px var(--skin), 0 0 0 5px rgba(245, 230, 211, .35);
}