/*
    Theme values and cascade order.

    Later layers win over earlier ones without stronger selectors. Keep normal
    rules inside a layer; unlayered rules would override this ordering.
*/
@layer reset, theme, base, components, layout, state;

@layer theme {
    :root {
        /* Soft-white pages and cool-neutral cards keep maroon prominent.
           Tiny gold details add warmth; lavender/plum remain secondary accents. */
        --page-background: #fafaf8;
        --navbar-background: #e5e7eb;
        /* Footer color is independent: navbar tuning must not recolor it. */
        --footer-background: #e5e7eb;
        --surface-background: #f2f3f5;
        --surface-light: var(--surface-background);
        --accent-background: #e8e3f0;
        --accent-color: #d8cdd5;
        /* Gold roles stay small: decorative edges, dark hover underlines, and
           pale hover fills on controls. Page and card surfaces stay neutral. */
        --gold-color: #c9a65a;
        --gold-color-dark: #8a681f;
        --gold-background: #f5ecd8;
        --avatar-background: var(--accent-color);
        --brand-color: #6f263d;
        --brand-color-dark: #5a1d31;
        --text-color: #292a30;
        --text-muted: #586575;
        /* Roles share colors; size, weight, and spacing retain their hierarchy. */
        --text-subtle: var(--text-muted);
        --text-strong-muted: var(--text-color);
        /* Inverse text must not change when ordinary card fills are adjusted. */
        --text-on-brand: #fafaf8;
        --text-on-brand-muted: #e5e7eb;
        --link-underline-muted: #89939f;
        --border-soft: #d8dce2;
        --border-medium: #aeb4bf;
        /* The maroon banner needs its own divider, not a light-card border. */
        --border-on-brand: #925b6a;

        /* Use installed Avenir Next, then the requested Helvetica fallback.
           Licensed webfonts can be enabled later; no missing-file requests. */
        --font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
        --base-font-size: 20px;
        --base-line-height: 1.65;
        --type-title: 3.5rem;
        --type-section: 2rem;
        --type-card: 1.375rem;
        --type-body-small: 1.25rem;
        --type-small: 1.125rem;
        --type-meta: 1rem;

        /* Separate interior rhythm from the larger pause between sections. */
        --space-small: 0.5rem;
        --space-medium: 1rem;
        --space-large: 2.75rem;
        --content-item-gap: 0.75rem;
        --content-section-gap: 2.5rem;
        --content-card-padding: 2rem;
        --page-section-gap: 3.5rem;
        --page-padding: 4rem;

        /* One alignment line shared by navbar, content bands, and footer. */
        --container-width: 82rem;
        --container-padding: 2.5rem;
        --page-inset: max(
            var(--container-padding),
            calc((100% - var(--container-width)) / 2)
        );
        --navbar-height: 5rem;
        --hero-logo-top-offset: 1.75rem;
        --border-radius: 2px;
    }

    @media (max-width: 48rem) {
        :root {
            --type-title: 2.5rem;
            --type-section: 1.75rem;
            --content-card-padding: 1.4rem;
            --page-section-gap: 2.5rem;
            --page-padding: 2.5rem;
            --container-padding: 1.25rem;
            --navbar-height: 4.5rem;
        }
    }
}