html[data-marketing-theme='light']:has(body[data-marketing-shell]),
html[data-marketing-theme='light']:has(body [data-marketing-shell]) {
  color-scheme: light;
  scrollbar-color: var(--public-scrollbar-thumb) var(--public-scrollbar-track);
  background-color: var(--public-page-bg);

  --public-page-bg: #f4f7f5;
  --public-scrollbar-track: #f4f7f5;
  --public-scrollbar-thumb: #718779;
  --public-surface: #fff;
  --public-elevated: #eef3ef;
  --public-text-primary: #17221d;
  --public-text-secondary: #435149;
  --public-text-muted: #56675d;
  --public-border: #e1e8e3;
  --public-theme-moon: #4f6f9f;
  --public-theme-sun: #9a6500;
  --public-accent: #087a58;
  --public-accent-hover: #06664a;
  --public-accent-soft: rgba(8, 122, 88, 0.12);
  --public-on-accent: #fff;
  --public-success: #11734f;
  --public-on-success: #fff;
  --public-danger: #b42318;
  --public-on-danger: #fff;
  --public-warning: #8a5a00;
  --public-focus-ring: #087a58;
  --public-overlay: rgba(23, 34, 29, 0.48);
  --public-shadow: 0 18px 42px rgba(23, 34, 29, 0.1), 0 3px 10px rgba(23, 34, 29, 0.04);
}

html[data-marketing-theme='dark']:has(body[data-marketing-shell]),
html[data-marketing-theme='dark']:has(body [data-marketing-shell]),
html:not([data-marketing-theme]):has(body[data-marketing-shell]),
html:not([data-marketing-theme]):has(body [data-marketing-shell]) {
  color-scheme: dark;
  scrollbar-color: var(--public-scrollbar-thumb) var(--public-scrollbar-track);
  background-color: var(--public-page-bg);

  --public-page-bg: #09090b;
  --public-scrollbar-track: #09090b;
  --public-scrollbar-thumb: #333338;
  --public-surface: #111113;
  --public-elevated: #18181b;
  --public-text-primary: #fafafa;
  --public-text-secondary: #e4e4e7;
  --public-text-muted: #c7c7cc;
  --public-border: #27272a;
  --public-theme-moon: #9bbaff;
  --public-theme-sun: #f0c56f;
  --public-accent: #2d694c;
  --public-accent-hover: #3cd97a;
  --public-accent-soft: rgba(45, 105, 76, 0.15);
  --public-on-accent: #ffffff;
  --public-success: #2c8056;
  --public-danger: #a74846;
  --public-warning: #f59e0b;
  --public-focus-ring: rgba(60, 217, 122, 0.42);
  --public-overlay: rgba(0, 0, 0, 0.72);
  --public-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset, 0 26px 60px rgba(0, 0, 0, 0.55);
}

body[data-marketing-shell],
body:has([data-marketing-shell]) {
  min-height: 100vh;
  scrollbar-color: var(--public-scrollbar-thumb) var(--public-scrollbar-track);
  background-color: var(--public-page-bg);
  color: var(--public-text-primary);
}

html:has(body[data-marketing-shell])::-webkit-scrollbar-track,
html:has(body [data-marketing-shell])::-webkit-scrollbar-track,
body[data-marketing-shell]::-webkit-scrollbar-track,
body:has([data-marketing-shell])::-webkit-scrollbar-track,
html:has(body[data-marketing-shell])::-webkit-scrollbar-corner,
html:has(body [data-marketing-shell])::-webkit-scrollbar-corner,
body[data-marketing-shell]::-webkit-scrollbar-corner,
body:has([data-marketing-shell])::-webkit-scrollbar-corner {
  background-color: var(--public-scrollbar-track);
}

html:has(body[data-marketing-shell])::-webkit-scrollbar-thumb,
html:has(body [data-marketing-shell])::-webkit-scrollbar-thumb,
body[data-marketing-shell]::-webkit-scrollbar-thumb,
body:has([data-marketing-shell])::-webkit-scrollbar-thumb {
  border: 2px solid var(--public-scrollbar-track);
  border-radius: 999px;
  background-color: var(--public-scrollbar-thumb);
}

[data-marketing-shell] {
  min-height: 100vh;
  background-color: var(--public-page-bg);
  color: var(--public-text-primary);
}

html[data-marketing-theme='light'] [data-marketing-shell] {
  --bg-primary: var(--public-page-bg);
  --bg-secondary: var(--public-surface);
  --bg-tertiary: var(--public-elevated);
  --bg-hover: var(--public-elevated);
  --bg-card: var(--public-surface);
  --bg-card-hover: var(--public-elevated);
  --surface: var(--public-surface);
  --surface-hover: var(--public-elevated);
  --surface-elevated: var(--public-elevated);
  --border: var(--public-border);
  --border-light: var(--public-border);
  --border-hover: var(--public-border);
  --border-color: var(--public-border);
  --text-primary: var(--public-text-primary);
  --text-secondary: var(--public-text-secondary);
  --text-tertiary: var(--public-text-muted);
  --text-muted: var(--public-text-muted);
  --accent: var(--public-accent);
  --accent-hover: var(--public-accent-hover);
  --accent-light: var(--public-accent-soft);
  --on-accent: var(--public-on-accent);
  --success: var(--public-success);
  --danger: var(--public-danger);
  --warning-text: var(--public-warning);
  --overlay-backdrop: var(--public-overlay);
  --focus-ring: var(--public-focus-ring);
  --shadow: var(--public-shadow);
  --shadow-sm: var(--public-shadow);
  --shadow-md: var(--public-shadow);
  --shadow-lg: var(--public-shadow);

  --green: var(--public-accent);
  --green-light: var(--public-accent);
  --green-bg: var(--public-accent-soft);
  --blue: var(--public-accent);
  --purple: var(--public-accent);
  --rose: var(--public-danger);
  --gradient-1: linear-gradient(135deg, var(--public-accent-hover), var(--public-accent));
  --gradient-2: linear-gradient(135deg, var(--public-accent), var(--public-accent-hover));
}

html[data-marketing-theme='light'] [data-marketing-shell] ::selection {
  color: var(--public-on-accent);
  background: var(--public-accent);
}