/* The homepage keeps its indigo identity in both color schemes. */
html[data-color-theme="light"] {
  color-scheme: light;
  --bg: #F7F8FC;
  --deep: #EFF1F8;
  --surface: #FFFFFF;
  --raised: #E9ECF5;
  --text: #20263A;
  --muted: #505A73;
  --quiet: #5C6881;
  --line: rgba(36, 46, 76, .12);
  --line-strong: rgba(36, 46, 76, .24);
  --accent: #4658BE;
  --accent-ink: #3D4FAF;
  --accent-hover: #3749A9;
  --accent-press: #2D3D94;
  --on-accent: #FFFFFF;
  --accent-tint: rgba(70, 88, 190, .09);
  --accent-glow: rgba(70, 88, 190, .12);
  --accent-ring: rgba(70, 88, 190, .38);
  /* Recording colors from the app's Daybreak palette. */
  --record: #D0342C;
  --on-record: #FFFFFF;
  --record-ring: rgba(208, 52, 44, .40);
  --record-glow: rgba(208, 52, 44, .20);
  --ready: #187552;
  --meter-idle: rgba(36, 46, 76, .12);
  --text-faint: rgba(36, 46, 76, .22);
  --text-spinner: rgba(36, 46, 76, .70);
  --hero-glow: rgba(70, 88, 190, .07);
  --hero-underline: rgba(80, 80, 80, .45);
  --glass: rgba(247, 248, 252, .94);
  --focus: #4658BE;
}

.theme-link {
  background: transparent;
}

.home-theme-moon,
.home-theme-dark-label {
  display: none;
}

html[data-color-theme="light"] .home-theme-sun,
html[data-color-theme="light"] .home-theme-light-label {
  display: none;
}

html[data-color-theme="light"] .home-theme-moon,
html[data-color-theme="light"] .home-theme-dark-label {
  display: inline;
}

html[data-color-theme="light"] .workspace {
  box-shadow: 0 24px 64px rgba(36, 46, 76, .10);
}

/* Give the Personal license a soft indigo tint in light mode. */
html[data-color-theme="light"] #pricing-personal > .sales-card-direct {
  background: linear-gradient(145deg, #EAEDFA, #F2F3FA);
}

html[data-color-theme="light"] #pricing-personal > .sales-card:not(.sales-card-direct) {
  background: var(--deep);
}

html[data-color-theme="light"] .workflow-preview .thought-lane-track {
  background: var(--line);
}

html[data-color-theme="light"] .workflow-preview .thought-lane-fill {
  background: #8993B1;
}

html[data-color-theme="light"] .workflow-preview .thought-lane--spoken .thought-lane-fill {
  background: linear-gradient(90deg, rgba(70, 88, 190, .4), var(--accent-ink));
}

html[data-color-theme="light"] .workflow-preview .sticky-features-ticks li {
  background: var(--line-strong);
}

html[data-color-theme="light"] .workflow-preview .sticky-features-ticks li[data-active="true"] {
  background: var(--accent-ink);
}

html[data-color-theme="light"] .workflow-preview .sticky-feature[data-active="true"] .sticky-feature-frame {
  box-shadow: 0 0 0 4px var(--accent-tint), 0 20px 44px rgba(36, 46, 76, .15);
}

/* Keep the feature panel's light text on its indigo background. */
html[data-color-theme="light"] .workflow-preview .more-features-panel {
  --text: #EDEEF5;
  --accent-ink: #A5AEFF;
  --text-faint: rgba(237, 238, 245, .22);
  --focus: #A5AEFF;
}