/*
|--------------------------------------------------------------------------
| Movadly Default Theme
|--------------------------------------------------------------------------
| Designers can start here. Keep content-specific styles in the CMS/page
| builder and use this file for the visual language of the website.
|
| CMS tokens available:
| --theme-primary, --theme-accent, --theme-text, --theme-bg,
| --theme-font, --theme-button-radius, --theme-section-spacing
*/

:root {
    color-scheme: light;
}

body {
    background: var(--theme-bg);
    color: var(--theme-text);
    font-family: var(--theme-font);
}

.site-header {
    background: var(--theme-bg);
    color: var(--theme-text);
}

.acc-hero,
.acc-hero-story {
    background: #000000;
    color: #ffffff;
}

.main-nav a,
.footer-columns a,
.footer-utility a {
    color: inherit;
}

.main-nav a:hover,
.footer-columns a:hover,
.footer-utility a:hover,
.acc-link:hover {
    color: var(--theme-accent);
}

.header-cta,
.btn,
.btn-primary,
.cookie-banner button,
.contact-form button,
.footer-store-links a {
    border-radius: var(--theme-button-radius);
}

.header-cta,
.btn-primary,
.contact-form button {
    background: var(--theme-primary);
    color: #ffffff;
}

.header-cta:hover,
.btn-primary:hover,
.contact-form button:hover {
    background: var(--theme-accent);
}

.builder-section {
    padding-top: var(--theme-section-spacing);
    padding-bottom: var(--theme-section-spacing);
}

.builder-bg-default,
.builder-bg-light {
    background: var(--theme-bg);
    color: var(--theme-text);
}

.builder-bg-dark {
    background: var(--theme-primary);
    color: #ffffff;
}

.builder-bg-accent {
    background: color-mix(in srgb, var(--theme-accent) 12%, #ffffff);
    color: var(--theme-text);
}

.eyebrow,
.mega-kicker,
.acc-link {
    color: var(--theme-accent);
}

.acc-link {
    text-decoration-color: var(--theme-accent);
}

.builder-card-grid article,
.builder-form-card,
.contact-form,
.mega-feature-card {
    border-color: color-mix(in srgb, var(--theme-text) 12%, transparent);
}

.site-footer {
    background: var(--theme-primary);
    color: #ffffff;
}

[dir="rtl"] body {
    text-align: right;
}

[dir="rtl"] .builder-hero,
[dir="rtl"] .builder-split {
    direction: rtl;
}