/* Industry colors are inherited only within the page content. */
.sc-page[data-industry-theme="restaurant"] {
    --industry-solid-hsl: 5, 44%, 40%;
    --industry-light-hsl: 5, 58%, 78%;
}

.sc-page[data-industry-theme="bowling"] {
    --industry-solid-hsl: 246, 34%, 43%;
    --industry-light-hsl: 246, 45%, 80%;
}

.sc-page[data-industry-theme="salon"] {
    --industry-solid-hsl: 273, 24%, 42%;
    --industry-light-hsl: 273, 35%, 79%;
}

.sc-page[data-industry-theme="wellness"] {
    --industry-solid-hsl: 153, 31%, 31%;
    --industry-light-hsl: 153, 32%, 76%;
}

.sc-page[data-industry-theme="auto"] {
    --industry-solid-hsl: 22, 44%, 35%;
    --industry-light-hsl: 22, 52%, 76%;
}

.sc-page[data-industry-theme="consulting"] {
    --industry-solid-hsl: 192, 39%, 31%;
    --industry-light-hsl: 192, 38%, 76%;
}

.sc-page[data-industry-theme="health"] {
    --industry-solid-hsl: 176, 44%, 28%;
    --industry-light-hsl: 176, 38%, 75%;
}

.sc-page[data-industry-theme="stay"] {
    --industry-solid-hsl: 144, 29%, 31%;
    --industry-light-hsl: 144, 28%, 75%;
}

.sc-page[data-industry-theme="massage"] {
    --industry-solid-hsl: 32, 33%, 34%;
    --industry-light-hsl: 32, 40%, 78%;
}

.sc-page[data-industry-theme="entrepreneur"] {
    --industry-solid-hsl: 213, 38%, 38%;
    --industry-light-hsl: 213, 43%, 78%;
}

.sc-page[data-industry-theme="company"] {
    --industry-solid-hsl: 231, 31%, 39%;
    --industry-light-hsl: 231, 38%, 79%;
}

.sc-page[data-industry-theme] {
    --industry-solid: hsl(var(--industry-solid-hsl));
    --industry-link: var(--industry-solid);
    --industry-hover: color-mix(in srgb, var(--industry-solid) 84%, #000);
    --sc-primary: var(--industry-solid);
    --sc-accent-ink: var(--industry-link);
    --sc-paper: color-mix(in srgb, var(--industry-solid) 5%, #fff);
    --sc-surface: color-mix(in srgb, var(--industry-solid) 2%, #fff);
    --sc-tint: color-mix(in srgb, var(--industry-solid) 9%, #fff);
    --sc-line: color-mix(in srgb, var(--industry-solid) 20%, #e4e4e7);
    --sc-highlight: #fff;
    --marketing-card-surface: var(--sc-surface);
    --marketing-card-line: var(--sc-line);
    --marketing-card-hover: var(--industry-link);
    --smplsColorPrimary-hsl: var(--industry-solid-hsl);
    --smplsColorPrimary: var(--industry-solid);
    --smplsColorButton: var(--industry-solid);
    --smplsColorButtonDark: var(--industry-solid);
    --smplsColorButtonHover: var(--industry-hover);
    --smplsColorButtonHoverDark: var(--industry-hover);
    --smplsColorButtonText: #fff;
    --smplsColorButtonTextDark: #fff;
    --smplsColorButtonTextHover: #fff;
    --smplsColorButtonTextHoverDark: #fff;
    --smplsColorButtonOutlined: var(--industry-link);
    --smplsColorButtonOutlinedDark: var(--industry-link);
    --smplsColorButtonOutlinedText: var(--industry-link);
    --smplsColorButtonOutlinedTextDark: var(--industry-link);
    --smplsColorButtonUnderlined: var(--industry-link);
    --smplsColorButtonUnderlinedDark: var(--industry-link);
    --smplsColorCard: var(--sc-surface);
    --smplsColorCardDark: var(--sc-surface);
    --smplsColorCardHeading: var(--sc-ink);
    --smplsColorCardHeadingDark: var(--sc-ink);
    --smplsColorCardText: var(--sc-muted);
    --smplsColorCardTextDark: var(--sc-muted);
    --smplsColorCardButton: var(--industry-solid);
    --smplsColorCardButtonDark: var(--industry-solid);
    --smplsColorCardButtonText: #fff;
    --smplsColorCardButtonTextDark: #fff;
    background: var(--sc-paper);
}

.dark .sc-page[data-industry-theme] {
    --industry-link: hsl(var(--industry-light-hsl));
    --sc-primary: var(--industry-solid);
    --sc-accent-ink: var(--industry-link);
    --sc-paper: color-mix(in srgb, var(--industry-solid) 8%, #1b191f);
    --sc-surface: color-mix(in srgb, var(--industry-solid) 8%, #25252c);
    --sc-tint: color-mix(in srgb, var(--industry-solid) 15%, #202027);
    --sc-line: color-mix(in srgb, var(--industry-link) 17%, #3d3d46);
}

.sc-page[data-industry-theme] .sc-hero.intro_hero {
    background: linear-gradient(110deg, var(--sc-tint), var(--sc-paper) 70%);
}

.sc-page[data-industry-theme] .sc-tinted {
    background: var(--sc-tint);
}

#smpls-editor-content .sc-page[data-industry-theme] .smpls-process-section {
    background-color: var(--sc-tint);
    background-image: linear-gradient(
        color-mix(in srgb, var(--sc-tint) 96%, transparent),
        color-mix(in srgb, var(--sc-tint) 96%, transparent)
    ), url('/artwork/process-mark-gray.svg');
}

.sc-page[data-industry-theme] .sc-hero .theme-heading {
    --smplsColorPrimary: var(--industry-link);
}

.sc-page[data-industry-theme] .sc-hero .smpls-text-gradient {
    background-image: linear-gradient(100deg, var(--industry-link), color-mix(in srgb, var(--industry-link) 78%, #b9a1a7)) !important;
}

.sc-page[data-industry-theme] .theme-subheading,
.sc-page[data-industry-theme] .theme-subheading .smpls-widget-content > p {
    color: var(--industry-link) !important;
    border-color: var(--industry-link) !important;
}