/* Bright orange and electric blue, with quiet surfaces around them. */
:root {
  --brand-blue: #2454ff;
  --brand-blue-dark: #153bc2;
  --brand-blue-soft: #edf2ff;
  --brand-blue-border: #c6d3ff;
  --orange: #ff7a24;
  --orange-dark: #a33d00;
  --brand-orange-soft: #fff0e3;
  --brand-orange-border: #ffc79e;
  --ink: #172746;
  --play-ink: #172746;
  --play-coral: #ff7a24;
  --muted: #647086;
  --mint: #eaf1ff;
  --lavender: #eaf3ff;
  --peach: #fff0e3;
}
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .note-editor summary:focus-visible { outline-color: var(--brand-blue); }
.button.primary { background: var(--orange); color: var(--ink); box-shadow: 0 3px 0 #e862182e; }
.button.primary:hover { background: #ff8c42; box-shadow: 0 5px 0 #e862182e; }
.button.dark { background: var(--brand-blue); color: white; }
.button.dark:hover { background: var(--brand-blue-dark); }
.button.secondary { background: var(--brand-blue-soft); color: var(--brand-blue-dark); }
.nav-link.active { background: var(--brand-blue-soft); color: var(--brand-blue); }
.nav-link:hover { background: #f0f4ff; }
.text-link, .self-save-row .text-link, .learning-card-bottom .text-link { color: var(--brand-blue-dark); }
.text-link:hover { color: var(--orange-dark); }
.home-content .welcome-copy h1 em, .self-intro .page-title em, .page-title em { color: var(--brand-blue); }
.home-content .welcome-copy h1 em::after, .self-intro .page-title em::after { background: #ffb37180; }
.self-intro > div > .eyebrow { color: var(--brand-blue-dark); }
.self-intro > div > .eyebrow::before, .greeting > span { color: var(--orange); }
.self-intro > div > p, .settings-intro { color: #59647a; }
.compass-summary { background: #ffe2bf; border-color: #ffbc86; box-shadow: 4px 5px 0 #ffc79e55; }
.compass-summary .eyebrow, .self-intro .compass-summary p, .reflection-progress, .reflection-progress > span { color: #79502e; }
.reflection-progress { border-color: #e9b98e; }
.progress-pebbles i { background: #e9c29b; }
.progress-pebbles i.filled { background: var(--brand-blue); }
.value-count { background: var(--brand-orange-soft); border-color: var(--brand-orange-border); color: var(--orange-dark); }
.value-chip { --card-tint: #edf2ff; --card-border: #c6d3ff; --card-color: #2454ff; }
.value-chip:nth-child(4n+2) { --card-tint: #fff0e3; --card-border: #ffc79e; --card-color: #a33d00; }
.value-chip:nth-child(4n+3) { --card-tint: #eaf5ff; --card-border: #b5d8ff; --card-color: #195bbd; }
.value-chip:nth-child(4n+4) { --card-tint: #fff5dc; --card-border: #f2d391; --card-color: #835500; }
.value-chip > span:last-child { color: #59647a; }
.value-chip:nth-child(4n+2) .value-art { color: #e96109; }
.curiosity-card { background: var(--brand-blue-soft); border-color: var(--brand-blue-border); }
.curiosity-spark, .curiosity-card .eyebrow, .curiosity-card p { color: var(--brand-blue-dark); }
.curiosity-caption { color: #586a91; }
.curiosity-card .button { background: white; color: var(--brand-blue-dark); border-color: #b7c7ff; }
.curiosity-card .button:hover { border-color: var(--brand-blue); }
.self-home-card { background: var(--brand-blue-soft); border-color: var(--brand-blue-border); }
.self-home-card .self-button { background: var(--brand-blue); border-color: var(--brand-blue); color: white; }
.self-home-card .self-button:hover { background: var(--brand-blue-dark); }
.self-home-card .eyebrow, .self-home-card p { color: #52668d; }
.category-card:nth-child(4n+1), .category-card:nth-child(4n+4) { background: var(--brand-blue-soft); border-color: var(--brand-blue-border); }
.category-card:nth-child(4n+2), .category-card:nth-child(4n+3) { background: var(--brand-orange-soft); border-color: var(--brand-orange-border); }
.category-icon.mint, .category-icon.lavender, .voice-symbol { background: #e3ecff; color: var(--brand-blue); }
.category-icon.peach, .category-icon.sand { background: #ffe4c9; color: var(--orange-dark); }
.reflection-card, .reflection-card.reflection-2 { border-top-color: var(--brand-blue); }
.reflection-card.reflection-1 { border-top-color: var(--orange); }
.suggestion-guide, .suggestion-guide small, .suggestion-guide strong, .note-editor summary { color: #59647a; }
.suggestion-chip { background: #fafbff; border-color: #dbe3f6; color: #415779; }
.suggestion-chip .icon { color: #647ba8; }
.suggestion-chip:hover { background: var(--brand-blue-soft); border-color: #8fa9ff; }
.suggestion-chip.selected, .reflection-1 .suggestion-chip.selected, .reflection-2 .suggestion-chip.selected, .intention-card .suggestion-chip.selected { background: var(--brand-blue); border-color: var(--brand-blue); color: white; box-shadow: 0 2px 0 #153bc226; }
.suggestion-chip.selected .icon { color: white; }
.intention-card, .scenario-picker { background: var(--brand-orange-soft); border-color: var(--brand-orange-border); }
.intention-star { color: #e96109; }
.intention-card .suggestion-chip { background: #fffaf5; border-color: #edc9a9; color: #79502e; }
.intention-card .suggestion-chip.selected { color: white; }
.scenario-chip { background: #fffaf5; border-color: #edc9a9; color: #79502e; }
.scenario-chip:hover, .scenario-chip[aria-pressed="true"] { background: #ffdfbd; border-color: #e96109; color: #783300; }
.install-card { background: #ffe2bf; border-color: #ffbc86; }
.install-card .eyebrow, .install-card p { color: #79502e; }
.stepper .current, .stepper .current > span { color: var(--brand-blue-dark); }
.stepper .current > span, .stepper .done > span { background: var(--brand-blue-soft); border-color: #b7c7ff; }
.stepper .done { color: var(--brand-blue-dark); }
.round-progress i.filled, .mini-progress > span { background: var(--brand-blue); }
.comparison-row.chosen-best { background: var(--brand-blue-soft); border-color: #8fa9ff; }
.comparison-row.chosen-worst { background: var(--brand-orange-soft); border-color: #f3b27d; }
.choice-button.selected.best, .rating-button.selected { background: var(--brand-blue); border-color: var(--brand-blue); }
.choice-button.selected.worst { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.option-tab.selected { background: var(--brand-blue-soft); border-color: #8fa9ff; color: var(--brand-blue-dark); }
.option-0 { background: #e4ecff; color: var(--brand-blue-dark); }
.option-1 { background: #ffe4c9; color: var(--orange-dark); }
.option-2 { background: #e8f6f1; color: #087f76; }
.option-fill-0, .dot-0 { background: var(--brand-blue); }
.option-fill-1, .dot-1 { background: var(--orange); }
.option-fill-2, .dot-2 { background: #087f76; }
.priority-slider input { background: linear-gradient(to right, var(--brand-blue) var(--range), #e4ebff var(--range)); }
.priority-slider input::-webkit-slider-thumb { background: var(--brand-blue); box-shadow: 0 0 0 1px var(--brand-blue); }
.priority-slider input::-moz-range-thumb { background: var(--brand-blue); }
.rating-dots i.on { background: var(--brand-blue); }
.is-listening .voice-symbol { background: #ffe4c9; color: var(--orange-dark); box-shadow: 0 0 0 5px #ff7a2420; }
#voice-status { color: var(--brand-blue-dark); }
#app-update, #connection-status { background: var(--brand-blue-soft); border-color: var(--brand-blue-border); color: #314c86; }
#app-update button { color: var(--brand-blue-dark); }
