@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  color-scheme: light;
  --dilly-canvas: #f3f7fc;
  --dilly-surface: #ffffff;
  --dilly-raised: #eaf0f7;
  --dilly-ink: #103056;
  --dilly-muted: #506f95;
  --dilly-dim: #70849b;
  --dilly-line: #cdd9e4;
  --dilly-line-strong: #9eafc1;
  --dilly-navy: #103056;
  --dilly-deep: #0c2440;
  --dilly-gold: #fbcf23;
  --dilly-gold-text: #7a5c00;
  --dilly-on-gold: #071523;
  --dilly-green: #e3f0eb;
  --dilly-positive: #176b37;
  --dilly-positive-bg: #e5f5eb;
  --dilly-waitlist-bg: #fff4c5;
  --dilly-negative: #a3332b;
  --dilly-negative-bg: #fce9e6;
  --dilly-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-family: var(--dilly-font);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --dilly-canvas: #071523;
    --dilly-surface: #0d1c24;
    --dilly-raised: #132b31;
    --dilly-ink: #f4f7f5;
    --dilly-muted: #a9bdb4;
    --dilly-dim: #789087;
    --dilly-line: #244239;
    --dilly-line-strong: #47675b;
    --dilly-navy: #030e1a;
    --dilly-deep: #061321;
    --dilly-gold: #f5c518;
    --dilly-gold-text: #f5c518;
    --dilly-on-gold: #030e1a;
    --dilly-green: #17352e;
    --dilly-positive: #8de0ac;
    --dilly-positive-bg: #0b251f;
    --dilly-waitlist-bg: #2a2410;
    --dilly-negative: #f2aaa0;
    --dilly-negative-bg: #351c1b;
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --dilly-canvas: #071523;
  --dilly-surface: #0d1c24;
  --dilly-raised: #132b31;
  --dilly-ink: #f4f7f5;
  --dilly-muted: #a9bdb4;
  --dilly-dim: #789087;
  --dilly-line: #244239;
  --dilly-line-strong: #47675b;
  --dilly-navy: #030e1a;
  --dilly-deep: #061321;
  --dilly-gold: #f5c518;
  --dilly-gold-text: #f5c518;
  --dilly-on-gold: #030e1a;
  --dilly-green: #17352e;
  --dilly-positive: #8de0ac;
  --dilly-positive-bg: #0b251f;
  --dilly-waitlist-bg: #2a2410;
  --dilly-negative: #f2aaa0;
  --dilly-negative-bg: #351c1b;
}

html[data-theme="light"] {
  color-scheme: light;
  --dilly-canvas: #f3f7fc;
  --dilly-surface: #ffffff;
  --dilly-raised: #eaf0f7;
  --dilly-ink: #103056;
  --dilly-muted: #506f95;
  --dilly-dim: #70849b;
  --dilly-line: #cdd9e4;
  --dilly-line-strong: #9eafc1;
  --dilly-navy: #103056;
  --dilly-deep: #0c2440;
  --dilly-gold: #fbcf23;
  --dilly-gold-text: #7a5c00;
  --dilly-on-gold: #071523;
  --dilly-green: #e3f0eb;
  --dilly-positive: #176b37;
  --dilly-positive-bg: #e5f5eb;
  --dilly-waitlist-bg: #fff4c5;
  --dilly-negative: #a3332b;
  --dilly-negative-bg: #fce9e6;
}

html[data-dilly-marketing] body {
  color: var(--dilly-ink);
  background: var(--dilly-canvas);
  font-family: var(--dilly-font);
}

html[data-dilly-pass],
html[data-dilly-pass] body,
html[data-dilly-pass] #root,
html[data-dilly-pass] .expo-root {
  color: var(--dilly-ink);
  background: var(--dilly-canvas);
  font-family: var(--dilly-font);
}

html[data-dilly-marketing] .top,
html[data-dilly-marketing] .footer { color: var(--dilly-ink); }
html[data-dilly-marketing] .hero,
html[data-dilly-marketing] .league,
html[data-dilly-marketing] .cta { background-color: var(--dilly-deep); }
html[data-dilly-marketing] .choice,
html[data-dilly-marketing] .biz,
html[data-dilly-marketing] .panel,
html[data-dilly-marketing] .tile,
html[data-dilly-marketing] .frame,
html[data-dilly-marketing] .hero-preview,
html[data-dilly-marketing] .visual,
html[data-dilly-marketing] .insight,
html[data-dilly-marketing] .inquiry,
html[data-dilly-marketing] .intent-panel,
html[data-dilly-marketing] .wizard-summary,
html[data-dilly-marketing] .wizard-check {
  color: var(--dilly-ink);
  background-color: var(--dilly-surface);
  border-color: var(--dilly-line);
}
html[data-dilly-marketing] .wash,
html[data-dilly-marketing] .section.alt,
html[data-dilly-marketing] .mini,
html[data-dilly-marketing] .wizard-consent { background-color: var(--dilly-raised); }
html[data-dilly-marketing] .text-link { color: var(--dilly-ink); }
html[data-dilly-marketing] .visual .tag,
html[data-dilly-marketing] .pill { background-color: var(--dilly-green); color: var(--dilly-ink); }
html[data-dilly-marketing] .hero-preview,
html[data-dilly-marketing] .visual { color: var(--dilly-ink); }
html[data-dilly-marketing] .player-wizard-shell { color: var(--dilly-ink); background: var(--dilly-raised); }
html[data-dilly-marketing] .wizard-progress span { background: var(--dilly-line); }
html[data-dilly-marketing] input,
html[data-dilly-marketing] select,
html[data-dilly-marketing] textarea {
  color: var(--dilly-ink);
  background-color: var(--dilly-surface);
  border-color: var(--dilly-line-strong);
}
html[data-dilly-marketing] .demo-note,
html[data-dilly-marketing] .wizard-check small { color: var(--dilly-muted); }
html[data-dilly-marketing] .wizard-options button { color: var(--dilly-ink); background: var(--dilly-surface); border-color: var(--dilly-line-strong); }
html[data-dilly-marketing] .wizard-options button.selected { color: #fff; background: var(--dilly-navy); border-color: var(--dilly-navy); }
html[data-dilly-marketing] .button,
html[data-dilly-marketing] .button.secondary,
html[data-dilly-marketing] .btn,
html[data-dilly-marketing] .btn-line,
html[data-dilly-marketing] .btn-navy { color: var(--dilly-on-gold); background: var(--dilly-gold); border-color: transparent; }
html[data-dilly-marketing] .button:hover,
html[data-dilly-marketing] .btn:hover { filter: brightness(.96); }
html[data-dilly-marketing] .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--dilly-line);
  border-radius: 50%;
  color: var(--dilly-ink);
  background: var(--dilly-surface);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}
html[data-dilly-marketing] .theme-toggle:focus-visible { outline: 3px solid var(--dilly-gold); outline-offset: 3px; }