/* ========================================
   VARIABLES — Design Tokens
   Clínica Estética Senz
   Botanical Luxury Theme
======================================== */

:root {
    /* ── Palette ── */
    --cor-fundo:           #F7F4F0;
    --cor-fundo-alt:       #E8DDD0;
    --cor-fundo-escuro:    #1C2B2A;
    --cor-primaria:        #2E4A44;
    --cor-primaria-mid:    #4A7A6D;
    --cor-primaria-light:  #8FB5A8;
    --cor-acento:          #C9B99A;
    --cor-acento-escuro:   #A89070;
    --cor-texto:           #1C2B2A;
    --cor-texto-mid:       #4A7A6D;
    --cor-texto-claro:     #8FB5A8;
    --cor-branco:          #FFFFFF;

    /* ── Focus ring ── */
    --foco-anel:           0 0 0 2px var(--cor-fundo), 0 0 0 4px var(--cor-acento);
    --foco-anel-escuro:    0 0 0 2px var(--cor-fundo-escuro), 0 0 0 4px var(--cor-acento);

    /* ── Typography ── */
    --fonte-titulo:  'Cormorant Garamond', Georgia, serif;
    --fonte-corpo:   'DM Sans', system-ui, sans-serif;

    /* ── Spacing scale ── */
    --gap-xs:   0.5rem;
    --gap-sm:   1rem;
    --gap-md:   2rem;
    --gap-lg:   4rem;
    --gap-xl:   6rem;

    /* ── Radii ── */
    --radius-sm:  4px;
    --radius-md:  12px;
    --radius-lg:  20px;

    /* ── Elevation ── */
    --sombra-sm:  0 1px 4px rgba(28, 43, 42, 0.06), 0 2px 8px rgba(28, 43, 42, 0.04);
    --sombra-md:  0 4px 12px rgba(28, 43, 42, 0.08), 0 8px 24px rgba(28, 43, 42, 0.06);
    --sombra-lg:  0 8px 24px rgba(28, 43, 42, 0.10), 0 16px 48px rgba(28, 43, 42, 0.08);

    /* ── Motion ── */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:    0.15s;
    --dur-base:    0.25s;
    --dur-slow:    0.4s;
}