:root,
:root[data-sf-preset="atelier"] {
    color-scheme: light;
    --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: var(--radius-lg);
    --radius-pill: var(--radius-sm);
    --radius-circle: 50%;
    --motion-fast: 120ms;
    --motion-base: 220ms;
    --motion-slow: 360ms;
    --z-base: 1;
    --z-header: 20;
    --z-overlay: 40;
    --z-drawer: 45;
    --z-toast: 60;
    --preset-bg-primary: #f4f1ec;
    --preset-bg-surface: #fcfbf9;
    --preset-bg-elevated: #ffffff;
    --preset-bg-muted: #ebe7e1;
    --preset-text-main: #1b1e24;
    --preset-text-muted: #666d78;
    --preset-action-primary: var(--theme-color-brand-primary, #3abb26);
    --preset-action-hover: var(--theme-color-brand-primarystrong, #2f8c1f);
    --preset-action-contrast: #ffffff;
    --preset-border-subtle: rgba(27, 30, 36, 0.12);
    --preset-border-strong: rgba(27, 30, 36, 0.24);
    --preset-overlay: rgba(24, 26, 31, 0.52);
    --preset-shadow-sm: 0 12px 28px rgba(27, 30, 36, 0.08);
    --preset-shadow-md: 0 22px 48px rgba(27, 30, 36, 0.14);
    --preset-shadow-lg: 0 36px 72px rgba(27, 30, 36, 0.16);
    --preset-focus-ring: rgba(58, 187, 38, 0.18);
    --preset-control-hover-bg: rgba(27, 30, 36, 0.04);
    --preset-control-hover-border: rgba(27, 30, 36, 0.22);
    --preset-success: #15803d;
    --preset-danger: #b91c1c;
    --bg-primary: var(--theme-color-surface-muted, var(--preset-bg-primary));
    --bg-surface: var(--theme-color-surface-base, var(--preset-bg-surface));
    --bg-elevated: var(--theme-color-surface-elevated, var(--preset-bg-elevated));
    --bg-muted: var(--theme-color-surface-muted, var(--preset-bg-muted));
    --text-main: var(--theme-color-text-primary, var(--preset-text-main));
    --text-muted: var(--theme-color-text-muted, var(--preset-text-muted));
    --action-primary: var(--theme-color-brand-primary, var(--preset-action-primary));
    --action-hover: var(--theme-color-brand-primarystrong, var(--preset-action-hover));
    --action-contrast: var(--theme-color-brand-contrast, var(--preset-action-contrast));
    --border-subtle: var(--theme-color-border-subtle, var(--preset-border-subtle));
    --border-strong: var(--theme-color-border-strong, var(--preset-border-strong));
    --radius-main: var(--theme-radius-card, var(--radius-md));
    --radius-control: var(--theme-radius-control, var(--radius-md));
    --radius-dialog: var(--theme-radius-dialog, var(--radius-lg));
    --shadow-sm: var(--preset-shadow-sm);
    --shadow-md: var(--preset-shadow-md);
    --shadow-lg: var(--preset-shadow-lg);
    --overlay-scrim: var(--preset-overlay);
    --focus-ring: var(--preset-focus-ring);
    --control-hover-bg: var(--preset-control-hover-bg);
    --control-hover-border: var(--preset-control-hover-border);
    --success: var(--preset-success);
    --danger: var(--preset-danger);
    --header-surface: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    --section-gap: var(--theme-space-section, var(--space-3xl));
    --surface: var(--bg-surface);
    --surface-alt: var(--bg-muted);
    --border: var(--border-subtle);
    --accent: var(--action-primary);
    --accent-strong: var(--action-hover);
    --text-primary: var(--text-main);
    --color-bg: var(--bg-primary);
    --color-bg-alt: var(--bg-muted);
    --color-surface: var(--bg-surface);
    --color-surface-elevated: var(--bg-elevated);
    --color-text: var(--text-main);
    --color-text-muted: var(--text-muted);
    --color-border: var(--border-subtle);
    --color-overlay: var(--overlay-scrim);
    --color-accent: var(--action-primary);
    --color-accent-strong: var(--action-hover);
    --color-hover-bg: var(--control-hover-bg);
    --color-hover-border: var(--control-hover-border);
    --color-hover-text: var(--text-main);
    --color-hover-accent-bg: color-mix(in srgb, var(--action-primary) 14%, transparent);
    --color-hover-accent-border: color-mix(in srgb, var(--action-primary) 32%, transparent);
    --color-hover-accent-text: var(--action-primary);
    --color-control-hover-bg: var(--control-hover-bg);
    --color-control-hover-border: var(--control-hover-border);
    --color-success: var(--success);
    --color-danger: var(--danger);
}

:root[data-theme="dark"],
:root[data-sf-preset="atelier"][data-theme="dark"] {
    color-scheme: dark;
    --preset-bg-primary: #181a1f;
    --preset-bg-surface: #262a31;
    --preset-bg-elevated: #2d323a;
    --preset-bg-muted: #202329;
    --preset-text-main: #f3f4f6;
    --preset-text-muted: #b6bcc7;
    --preset-border-subtle: rgba(255, 255, 255, 0.1);
    --preset-border-strong: rgba(255, 255, 255, 0.22);
    --preset-overlay: rgba(0, 0, 0, 0.58);
    --preset-shadow-sm: 0 14px 30px rgba(0, 0, 0, 0.28);
    --preset-shadow-md: 0 28px 60px rgba(0, 0, 0, 0.38);
    --preset-shadow-lg: 0 42px 84px rgba(0, 0, 0, 0.46);
    --preset-control-hover-bg: rgba(255, 255, 255, 0.08);
    --preset-control-hover-border: rgba(255, 255, 255, 0.24);
    --header-surface: color-mix(in srgb, var(--bg-surface) 88%, transparent);
    /* Keep storefront preview visually distinct in dark mode even with theme token overrides. */
    --bg-primary: var(--preset-bg-primary);
    --bg-surface: var(--preset-bg-surface);
    --bg-elevated: var(--preset-bg-elevated);
    --bg-muted: var(--preset-bg-muted);
    --text-main: var(--preset-text-main);
    --text-muted: var(--preset-text-muted);
}

:root[data-sf-preset="graphite"] {
    --font-display: "Manrope", "Space Grotesk", sans-serif;
    --preset-bg-primary: #edf3f8;
    --preset-bg-surface: #ffffff;
    --preset-bg-elevated: #ffffff;
    --preset-bg-muted: #dfe8f0;
    --preset-text-main: #102033;
    --preset-text-muted: #567086;
    --preset-action-primary: #006fff;
    --preset-action-hover: #0056c7;
    --preset-focus-ring: rgba(0, 111, 255, 0.18);
}

:root[data-sf-preset="graphite"][data-theme="dark"] {
    color-scheme: dark;
    --preset-bg-primary: #0d1724;
    --preset-bg-surface: #142131;
    --preset-bg-elevated: #1a2b40;
    --preset-bg-muted: #111d2d;
    --preset-text-main: #f4f8ff;
    --preset-text-muted: #9fb3ca;
    --preset-border-subtle: rgba(178, 202, 226, 0.18);
    --preset-border-strong: rgba(178, 202, 226, 0.32);
    --preset-overlay: rgba(2, 10, 18, 0.68);
    --preset-shadow-sm: 0 14px 30px rgba(0, 6, 18, 0.35);
    --preset-shadow-md: 0 28px 60px rgba(0, 6, 18, 0.44);
    --preset-shadow-lg: 0 42px 84px rgba(0, 6, 18, 0.54);
    --preset-control-hover-bg: rgba(159, 179, 202, 0.12);
    --preset-control-hover-border: rgba(159, 179, 202, 0.3);
}

:root[data-sf-preset="market"] {
    --font-display: "Sora", "Space Grotesk", sans-serif;
    --preset-bg-primary: #f3eee7;
    --preset-bg-surface: #fffdfa;
    --preset-bg-elevated: #ffffff;
    --preset-bg-muted: #e7ddd1;
    --preset-text-main: #2a1f19;
    --preset-text-muted: #7b685d;
    --preset-action-primary: #d06628;
    --preset-action-hover: #ae4d15;
    --preset-focus-ring: rgba(208, 102, 40, 0.2);
}

:root[data-sf-preset="market"][data-theme="dark"] {
    color-scheme: dark;
    --preset-bg-primary: #1f1713;
    --preset-bg-surface: #2b211b;
    --preset-bg-elevated: #342823;
    --preset-bg-muted: #241b17;
    --preset-text-main: #fff3ea;
    --preset-text-muted: #d6b9a4;
    --preset-border-subtle: rgba(255, 230, 213, 0.14);
    --preset-border-strong: rgba(255, 230, 213, 0.26);
    --preset-overlay: rgba(18, 10, 5, 0.7);
    --preset-shadow-sm: 0 14px 30px rgba(17, 8, 3, 0.34);
    --preset-shadow-md: 0 28px 60px rgba(17, 8, 3, 0.42);
    --preset-shadow-lg: 0 42px 84px rgba(17, 8, 3, 0.52);
    --preset-control-hover-bg: rgba(255, 230, 213, 0.1);
    --preset-control-hover-border: rgba(255, 230, 213, 0.22);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --preset-bg-primary: #181a1f;
        --preset-bg-surface: #262a31;
        --preset-bg-elevated: #2d323a;
        --preset-bg-muted: #202329;
        --preset-text-main: #f3f4f6;
        --preset-text-muted: #b6bcc7;
        --preset-border-subtle: rgba(255, 255, 255, 0.1);
        --preset-border-strong: rgba(255, 255, 255, 0.22);
        --preset-overlay: rgba(0, 0, 0, 0.58);
        --preset-shadow-sm: 0 14px 30px rgba(0, 0, 0, 0.28);
        --preset-shadow-md: 0 28px 60px rgba(0, 0, 0, 0.38);
        --preset-shadow-lg: 0 42px 84px rgba(0, 0, 0, 0.46);
        --preset-control-hover-bg: rgba(255, 255, 255, 0.08);
        --preset-control-hover-border: rgba(255, 255, 255, 0.24);
    }

    :root[data-sf-preset="graphite"]:not([data-theme="light"]) {
        --preset-bg-primary: #0d1724;
        --preset-bg-surface: #142131;
        --preset-bg-elevated: #1a2b40;
        --preset-bg-muted: #111d2d;
        --preset-text-main: #f4f8ff;
        --preset-text-muted: #9fb3ca;
        --preset-border-subtle: rgba(178, 202, 226, 0.18);
        --preset-border-strong: rgba(178, 202, 226, 0.32);
        --preset-overlay: rgba(2, 10, 18, 0.68);
        --preset-shadow-sm: 0 14px 30px rgba(0, 6, 18, 0.35);
        --preset-shadow-md: 0 28px 60px rgba(0, 6, 18, 0.44);
        --preset-shadow-lg: 0 42px 84px rgba(0, 6, 18, 0.54);
        --preset-control-hover-bg: rgba(159, 179, 202, 0.12);
        --preset-control-hover-border: rgba(159, 179, 202, 0.3);
    }

    :root[data-sf-preset="market"]:not([data-theme="light"]) {
        --preset-bg-primary: #1f1713;
        --preset-bg-surface: #2b211b;
        --preset-bg-elevated: #342823;
        --preset-bg-muted: #241b17;
        --preset-text-main: #fff3ea;
        --preset-text-muted: #d6b9a4;
        --preset-border-subtle: rgba(255, 230, 213, 0.14);
        --preset-border-strong: rgba(255, 230, 213, 0.26);
        --preset-overlay: rgba(18, 10, 5, 0.7);
        --preset-shadow-sm: 0 14px 30px rgba(17, 8, 3, 0.34);
        --preset-shadow-md: 0 28px 60px rgba(17, 8, 3, 0.42);
        --preset-shadow-lg: 0 42px 84px rgba(17, 8, 3, 0.52);
        --preset-control-hover-bg: rgba(255, 230, 213, 0.1);
        --preset-control-hover-border: rgba(255, 230, 213, 0.22);
    }
}