:root, body.light, body.dark {
    --rosary-blue: #042c53;
    --rosary-gold: #f3be40;
    --off-white: #fefdf9;

    /* ─── BeerCSS tokens (Material-3 naming) ────────────────────────────── */
    --primary              : var(--rosary-gold);
    --on-primary           : var(--rosary-blue);
    --primary-container    : color-mix(in srgb, var(--rosary-gold) 80%, white);
    --on-primary-container : var(--rosary-blue);

    --secondary            : color-mix(in srgb, var(--rosary-gold) 50%, var(--rosary-blue));
    --on-secondary         : var(--off-white);
    --secondary-container  : color-mix(in srgb, var(--secondary) 30%, black);
    --on-secondary-container : var(--off-white);

    --tertiary             : #3ba4b0;
    --on-tertiary          : var(--off-white);
    --tertiary-container   : color-mix(in srgb, #3ba4b0 85%, white);
    --on-tertiary-container: #00282e;

    --error                : #ffb4ab;
    --on-error             : #690005;
    --error-container      : #93000a;
    --on-error-container   : #ffb4ab;

    --background                : var(--rosary-blue);
    --on-background             : var(--off-white);

    --surface                   : color-mix(in srgb, var(--rosary-blue) 85%, black);
    --surface-dim               : color-mix(in srgb, var(--rosary-blue) 92%, black);
    --surface-bright            : color-mix(in srgb, var(--rosary-blue) 70%, white);

    --surface-container-lowest  : color-mix(in srgb, var(--rosary-blue) 94%, black);
    --surface-container-low     : color-mix(in srgb, var(--rosary-blue) 90%, black);
    --surface-container         : color-mix(in srgb, var(--rosary-blue) 85%, black);
    --surface-container-high    : color-mix(in srgb, var(--rosary-blue) 78%, black);
    --surface-container-highest : color-mix(in srgb, var(--rosary-blue) 70%, black);

    --on-surface                : var(--off-white);
    --surface-variant           : color-mix(in srgb, var(--rosary-blue) 65%, white);
    --on-surface-variant        : color-mix(in srgb, var(--off-white) 70%, var(--rosary-blue));

    --outline                : color-mix(in srgb, var(--off-white) 30%, var(--rosary-blue));
    --outline-variant        : color-mix(in srgb, var(--outline) 60%, var(--rosary-blue));

    --shadow                 : #000000;
    --scrim                  : #00000040;

    --inverse-surface        : var(--off-white);
    --inverse-on-surface     : var(--rosary-blue);
    --inverse-primary        : color-mix(in srgb, var(--rosary-gold) 40%, var(--rosary-blue));

    --elevate1: 0;
    --elevate2: 0;
    --elevate3: 0;
}

/* Hero section */
.hero-section {
    padding: 4rem 1rem 3rem;
    text-align: center;
}

.hero-logo {
    width: 96px;
    height: 96px;
    margin-bottom: 1.5rem;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.hero-subtitle {
    font-size: 1.2rem;
    opacity: 0.85;
    margin-bottom: 2rem;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* Features grid */
.features-section {
    padding: 2rem 1rem 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.feature-icon {
    font-size: 2.5rem;
    overflow: visible;
    margin-bottom: 0.75rem;
    color: var(--primary);
}

/* Footer */
/* Work in progress section */
.wip-section {
    padding: 3rem 1rem 4rem;
    max-width: 480px;
    margin: 0 auto;
    border-top: 1px solid var(--outline-variant);
}

.wip-icon {
    font-size: 2.5rem;
    overflow: visible;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.wip-body {
    opacity: 0.8;
    margin-bottom: 1.5rem;
}

/* Footer */
.site-footer {
    padding: 2rem 1rem;
    text-align: center;
    opacity: 0.7;
    font-size: 0.875rem;
    border-top: 1px solid var(--outline-variant);
}

.site-footer a {
    color: var(--primary);
}