/* Shared section appearance (BlockAppearance.cs): tone, spacing, width, card style.
   Blocks consume --wb-card-border / --wb-card-shadow / --wb-card-bg for their cards. */

.wb-tone-muted,
.wb-tone-accent,
.wb-tone-inverse {
    padding-inline: clamp(1rem, 3vw, 2rem);
    border-radius: var(--radius-lg, 16px);
}

.wb-tone-muted {
    background: color-mix(in srgb, var(--text-primary) 4%, var(--surface-bg));
}

.wb-tone-accent {
    background: color-mix(in srgb, var(--accent-primary) 9%, var(--surface-bg));
}

.wb-tone-inverse {
    --surface-bg: #15171c;
    --text-primary: #f3f4f6;
    --text-muted: #b6bac3;
    --heading-color: #ffffff;
    --border-color: #343843;
    --link-color: color-mix(in srgb, var(--accent-primary) 65%, #fff);
    background: var(--surface-bg);
    color: var(--text-primary);
}

.wb-tone-inverse h2,
.wb-tone-inverse h3 {
    color: var(--heading-color);
}

.wb-space-compact {
    padding-block: 1rem;
}

.wb-space-roomy {
    padding-block: clamp(2.5rem, 6vw, 5rem);
}

.wb-tone-muted:not(.wb-space-compact):not(.wb-space-roomy),
.wb-tone-accent:not(.wb-space-compact):not(.wb-space-roomy),
.wb-tone-inverse:not(.wb-space-compact):not(.wb-space-roomy) {
    padding-block: clamp(1.5rem, 4vw, 3rem);
}

.wb-width-wide {
    width: min(1400px, calc(100vw - 2rem));
    margin-inline: calc((100% - min(1400px, calc(100vw - 2rem))) / 2);
}

.wb-width-full {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
    padding-inline: clamp(1rem, 4vw, 3rem);
}

.wb-cards-outlined {
    --wb-card-shadow: none;
    --wb-card-border: 1px solid var(--border-color);
}

.wb-cards-elevated {
    --wb-card-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.08);
    --wb-card-border: 1px solid transparent;
}

.wb-cards-flat {
    --wb-card-shadow: none;
    --wb-card-border: 1px solid transparent;
    --wb-card-bg: color-mix(in srgb, var(--text-primary) 4%, var(--surface-bg));
}

@media (prefers-reduced-motion: reduce) {
    .wb-cards-elevated * {
        transition: none !important;
    }
}