/* Instituto Aurora Dermatologia - design tokens */

:root {
    /* Neutros quentes (ivory / off-white) */
    --color-paper: #f6f3ec;      /* fundo principal - ivory */
    --color-white: #ffffff;
    --color-mist: #efeae1;       /* seção alternada, muito suave */
    --color-sand: #e7dfd2;       /* areia um tom mais quente */

    /* Verde sage (secundária) */
    --color-sage: #7d8c78;
    --color-sage-deep: #5c6a58;
    --color-sage-soft: rgba(125, 140, 120, 0.10);
    --color-sage-line: rgba(125, 140, 120, 0.26);

    /* Dourado / bege discreto (detalhes) */
    --color-gold: #b39a6d;
    --color-gold-soft: rgba(179, 154, 109, 0.14);
    --color-gold-line: rgba(179, 154, 109, 0.42);

    /* Grafite (textos) */
    --color-ink: #23231f;
    --color-ink-soft: rgba(35, 35, 31, 0.66);
    --color-ink-faint: rgba(35, 35, 31, 0.42);
    --color-ink-ghost: rgba(35, 35, 31, 0.09);
    --color-hairline: rgba(35, 35, 31, 0.13);

    --font-display: "Fraunces", "Georgia", serif;
    --font-body: "Manrope", "Segoe UI", sans-serif;

    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4rem;
    --space-7: 6rem;
    --space-8: 8rem;
    --space-9: 10rem;

    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 10px;

    --max-width: 1200px;
    --container-pad: clamp(1.25rem, 5vw, 2.5rem);
    --header-height: 4.75rem;
    --concept-banner-h: 1.65rem;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition: 0.4s var(--ease-out);

    --shadow-soft: 0 24px 60px -28px rgba(35, 35, 31, 0.22);
}