/**
 * Design languages — complete visual systems.
 * Body class: theme-variant-{editorial|studio|industrial|boutique|clinical|craft}
 * Legacy variant names are remapped in theme_variant_class().
 */

/* Language owns radius + chrome shape. Density only changes spacing. */

body.theme-variant-studio {
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-btn: 12px;
    --radius: var(--radius-md);
    --tracking-display: -0.045em;
    --leading-display: 1.02;
}

body.theme-variant-studio .section-head {
    text-align: left;
    max-width: 40rem;
    margin-inline: 0;
}

body.theme-variant-studio .section-head h2 {
    font-family: var(--font-display, var(--font-sans));
    font-weight: 500;
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-display);
    font-size: var(--text-4xl);
}

body.theme-variant-studio .section-head .eyebrow {
    letter-spacing: 0.16em;
    font-weight: 500;
    font-size: var(--text-xs);
    color: var(--color-muted);
}

body.theme-variant-studio .section-services,
body.theme-variant-studio .section-testimonials,
body.theme-variant-studio .section-faq {
    background: var(--surface-2);
}

body.theme-variant-studio .section-about,
body.theme-variant-studio .section-gallery {
    background: var(--surface-1);
}

body.theme-variant-studio .section-pricing,
body.theme-variant-studio .section-hours-map {
    background: var(--surface-ink);
    color: var(--on-ink);
}

body.theme-variant-studio .section-pricing .section-head h2,
body.theme-variant-studio .section-hours-map > .hours-map-grid > .hours-map-card:not(.map-card) h2 {
    color: var(--on-ink);
}

body.theme-variant-studio .section-pricing .section-head .eyebrow,
body.theme-variant-studio .section-pricing .section-head .section-lead,
body.theme-variant-studio .section-hours-map .section-head .eyebrow,
body.theme-variant-studio .section-hours-map .section-head .section-lead {
    color: var(--theme-on-ink-muted, var(--on-ink));
}

body.theme-variant-studio .hours-map-card {
    color: var(--on-surface);
}

body.theme-variant-studio .service-card {
    background: var(--surface-1);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: none;
}

/* Editorial — serif display, hairline rules, asymmetric heads */
body.theme-variant-editorial {
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-btn: 4px;
    --radius: var(--radius-md);
}

body.theme-variant-editorial .section-head {
    text-align: left;
    max-width: 44rem;
    margin-inline: 0;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
}

body.theme-variant-editorial .section-head h2 {
    font-family: var(--font-display, Georgia, serif);
    font-weight: 600;
    font-size: var(--text-4xl);
    letter-spacing: -0.02em;
}

body.theme-variant-editorial .service-card {
    border: 0;
    border-left: 2px solid var(--theme-accent);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

body.theme-variant-editorial .section-cta,
body.theme-variant-editorial .section-head {
    text-align: left;
}

/* Industrial — heavy type, tight radius, ink service band */
body.theme-variant-industrial {
    --radius-sm: 4px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-btn: 4px;
    --radius: var(--radius-md);
    --shadow: none;
}

body.theme-variant-industrial .section-head h2 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--text-2xl);
    font-weight: 800;
}

body.theme-canvas-dark.theme-variant-industrial .section-services {
    background: var(--surface-ink);
    color: var(--on-ink);
    border-block: 4px solid var(--theme-accent);
}

body.theme-canvas-dark.theme-variant-industrial .section-services .section-head h2,
body.theme-canvas-dark.theme-variant-industrial .section-services .service-card h3 {
    color: var(--on-ink);
}

body.theme-canvas-dark.theme-variant-industrial .section-services .eyebrow {
    color: var(--theme-accent);
}

body.theme-canvas-dark.theme-variant-industrial .section-services .service-card-icon {
    background: color-mix(in srgb, var(--theme-accent) 18%, transparent);
    color: var(--theme-accent);
}

body.theme-canvas-dark.theme-variant-industrial .section-services .service-card {
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.12);
    color: var(--on-ink);
    box-shadow: none;
}

body.theme-canvas-dark.theme-variant-industrial .section-services .service-card p {
    color: var(--theme-on-ink-muted, var(--on-ink));
}

body.theme-variant-industrial .section-services.layout-list {
    background: var(--surface-2);
    color: var(--on-surface);
    border: 0;
}

body.theme-variant-industrial .section-services.layout-list .section-head h2,
body.theme-variant-industrial .section-services.layout-list .service-card h3 {
    color: var(--theme-ink);
}

body.theme-variant-industrial .section-services.layout-list .eyebrow {
    color: var(--theme-accent);
}

body.theme-variant-industrial .section-services.layout-list .service-card {
    background: var(--surface-1);
    border-color: var(--color-border);
    color: var(--on-surface);
}

body.theme-variant-industrial .cta-band {
    border-top: 4px solid var(--theme-accent);
}

/* Boutique — warm surfaces, soft radius, generous white */
body.theme-variant-boutique {
    --radius-sm: 16px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-btn: 999px;
    --radius: var(--radius-md);
}

body.theme-variant-boutique .section-services,
body.theme-variant-boutique .section-testimonials {
    background: color-mix(in srgb, var(--theme-accent) 7%, var(--surface-1));
}

body.theme-variant-boutique .service-card {
    border: 0;
    box-shadow: 0 18px 48px color-mix(in srgb, var(--theme-accent) 14%, rgba(14, 24, 32, 0.06));
}

body.theme-variant-boutique .section-head h2 {
    font-family: var(--font-display, var(--font-sans));
    font-weight: 600;
}

/* Clinical — cool neutrals, calm density, no shadows */
body.theme-variant-clinical {
    --radius-sm: 8px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-btn: 8px;
    --radius: var(--radius-md);
    --shadow: none;
    --shadow-lg: 0 8px 24px rgba(14, 24, 32, 0.05);
}

body.theme-variant-clinical .section-head {
    text-align: left;
    max-width: none;
    margin-inline: 0;
}

body.theme-variant-clinical .section-cta {
    text-align: left;
}

body.theme-variant-clinical .service-card {
    box-shadow: none;
    background: var(--surface-2);
    border-color: var(--color-border);
}

body.theme-variant-clinical .service-card-icon {
    background: var(--surface-1);
    border: 1px solid var(--color-border);
}

/* Craft — photo-forward, tactile cards */
body.theme-variant-craft {
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-btn: 6px;
    --radius: var(--radius-md);
}

body.theme-variant-craft .section-head h2 {
    font-family: var(--font-display, Georgia, serif);
    font-weight: 600;
    letter-spacing: -0.025em;
}

body.theme-variant-craft .section-gallery,
body.theme-variant-craft .section-about {
    background: var(--surface-1);
}

body.theme-variant-craft .section-services {
    background: color-mix(in srgb, var(--theme-primary) 5%, var(--surface-2));
}

body.theme-variant-craft .service-card {
    background: var(--surface-1);
    border-color: color-mix(in srgb, var(--theme-accent) 22%, var(--color-border));
}

body.theme-variant-craft .gallery-frame {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

body.theme-variant-civic {
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-btn: 8px;
    --radius: var(--radius-md);
}

body.theme-variant-atelier {
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-btn: 12px;
    --radius: var(--radius-md);
}