:root {
    /*
     * Brand: somente cores aprovadas e em uso entram aqui.
     * Para uma nova tonalidade da marca, altere os dois tons-base abaixo;
     * bordas e sombras derivadas acompanham automaticamente.
     */
    --color-primary: #3a9d89;
    --color-primary-strong: #1b6a59;
    --color-action: #287d6b;
    --color-rating-star: #ffb400;
    --color-heading: #12362f;

    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-soft: #f8f8f8;
    --color-text: #171717;
    --color-muted: #59665f;
    --color-muted-strong: #59665f;
    --color-on-primary: #ffffff;

    --color-border: color-mix(in srgb, var(--color-text) 12%, transparent);
    --color-border-strong: color-mix(in srgb, var(--color-primary-strong) 22%, transparent);
    --color-action-border: color-mix(in srgb, var(--color-primary-strong) 34%, transparent);
    --color-focus: color-mix(in srgb, var(--color-primary) 30%, transparent);
    --color-header-surface: rgba(255, 255, 255, 0.96);
    --color-menu-overlay: rgba(234, 242, 238, 0.64);
    --color-menu-overlay-opaque: rgba(234, 242, 238, 0.96);

    /* Font family is controlled in pages/typography.css. */

    /* Shared header/footer logo dimensions. */
    --brand-logo-width:164px;
    --brand-logo-width-compact:130px;

    /* Layout */
    --layout-shell: 1420px;
    --layout-gutter: 24px;

    /* Spacing system: escala global para componentes e secoes futuros. */
    --space-2: 8px;
    --space-4: 16px;
    --space-5: 20px;
    --space-9: 48px;
    --space-11: 80px;

    /* Radius: pontos globais de controle. */
    --radius-button: 999px;
    --radius-card: 24px;
    --radius-card-small: 16px;
    --radius-media: 18px;
    --radius-icon: 12px;

    /* Elevation */
    --shadow-header: 0 10px 34px color-mix(in srgb, var(--color-text) 7%, transparent);
    --shadow-header-scrolled: 0 10px 28px color-mix(in srgb, var(--color-text) 7%, transparent);
    --shadow-menu: 0 24px 70px color-mix(in srgb, var(--color-text) 14%, transparent);
    --shadow-menu-mobile: 0 22px 60px color-mix(in srgb, var(--color-text) 15%, transparent);
    --shadow-action: 0 8px 18px color-mix(in srgb, var(--color-primary) 22%, transparent);
    --shadow-action-hover: 0 7px 16px color-mix(in srgb, var(--color-text) 20%, transparent);

    /* Interaction */
    --interaction-press-opacity: 0.62;

    /* Motion */
    --duration-fast: 280ms;
    --duration-ui: 280ms;
    --duration-panel: 300ms;
    --duration-layout: 350ms;

    --ease-ui: cubic-bezier(0.22, 1, 0.36, 1);

    /* Layering */
    --z-backdrop: 90;
    --z-header: 100;
    --z-skip-link: 2000;
}

@media (max-width: 1180px) {
    :root {
        --layout-gutter: 17px;
    }
}

@media (max-width: 899px) {
    :root {
        --layout-gutter: 16px;
    }
}

@media(max-width:899px) { :root { --brand-logo-width:clamp(138px,22vw,148px); --brand-logo-width-compact:var(--brand-logo-width); } }