/* Eluvi · charcoal, soft ivory and the warmth of the approved light beam. */
:root {
  color-scheme: light;
  --paper:#f8f6f2;
  --ink:#292a2c;
  --muted:#686662;
  --line:#dedad3;
  --gold:#9c7950;
  --cream:#eee7dc;
  --white:#fffefa;
  --surface:#fffefa;
  --surface-soft:#efede8;
  --surface-hover:#e7e3db;
  --section:#f1efea;
  --accent:#7d603d;
  --accent-soft:#ede2cf;
  --selected:#f0e8da;
  --selected-line:#97764b;
  --button-bg:#292a2c;
  --button-text:#fffaf0;
  --button-hover:#454444;
  --focus:#9d713f;
  --error:#a83d34;
  --offer:#ede0c9;
  --offer-ink:#42372a;
  --shadow:0 12px 36px #292a2c0b;
  --hero-glow:#e8d2a540;
  --logo-plate:#f8f6f2;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --paper:#191a1c;
  --ink:#f6f1e8;
  --muted:#b7b3ac;
  --line:#42413e;
  --gold:#e6cc9f;
  --cream:#34312b;
  --white:#252628;
  --surface:#252628;
  --surface-soft:#303032;
  --surface-hover:#3b3936;
  --section:#202123;
  --accent:#e6cc9f;
  --accent-soft:#3b3327;
  --selected:#3b352b;
  --selected-line:#d8bd8f;
  --button-bg:#efe1c7;
  --button-text:#272624;
  --button-hover:#fff0d5;
  --focus:#efce9a;
  --error:#ffb0a5;
  --offer:#322c23;
  --offer-ink:#f0dfc0;
  --shadow:0 12px 36px #0000001f;
  --hero-glow:#d7b77d14;
  --logo-plate:#f8f6f2;
}
html { background:var(--paper) }
body { background:var(--paper);color:var(--ink) }
::selection { background:var(--accent-soft);color:var(--ink) }
em,.little-star { color:var(--accent) }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,label:focus-visible,
.question-choice:has(input:focus-visible),.question-fields select:focus-visible {
  outline-color:var(--focus);
}
input,select { color:var(--ink);accent-color:var(--accent) }
input::placeholder { color:var(--muted);opacity:.85 }
.preview-banner { background:var(--surface-soft);color:var(--muted) }
.header { gap:22px }
.header-actions,.questionnaire-header-actions { display:flex;align-items:center;gap:14px }
.theme-switch { display:inline-flex;align-items:center;gap:3px;padding:4px;border:1px solid var(--line);border-radius:99px;background:var(--surface-soft);flex-shrink:0 }
.theme-switch button { display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:99px;background:transparent;color:var(--muted);padding:9px 12px;font-size:12px;font-weight:600;line-height:1.2;min-height:34px }
.theme-switch svg { width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round }
.theme-switch button[aria-pressed="true"] { background:var(--button-bg);color:var(--button-text);box-shadow:0 2px 5px #00000012 }
.theme-switch button:not([aria-pressed="true"]):hover { color:var(--ink);background:var(--surface-hover) }
.button.dark,.planner-tabs button.active { background:var(--button-bg);color:var(--button-text) }
.button.dark:hover { background:var(--button-hover) }
.button.outline { border-color:var(--line);color:var(--ink) }
.button.outline:hover,.help-bubble:hover { background:var(--surface-hover) }
.help-bubble { border-color:var(--line);background:var(--surface);color:var(--ink) }
.offer-banner { background:var(--offer);color:var(--offer-ink);border-color:var(--line) }
.offer-code { background:var(--button-bg);color:var(--button-text);border-radius:5px }
.quote-hero.hero { background:radial-gradient(ellipse at 75% 10%,var(--hero-glow),transparent 58%),var(--paper);color:var(--ink);border-bottom:1px solid var(--line) }
.quote-hero .eyebrow { color:var(--accent) }
.quote-hero.hero .intro { color:var(--ink) }
.quote-hero .intro span,.quote-hero .form-note,.quote-hero .hero-preview-note { color:var(--muted) }
.quote-hero .zip-form label { color:var(--ink) }
.quote-hero .zip-entry,.zip-entry { background:var(--surface);border-color:var(--line);box-shadow:var(--shadow) }
.zip-entry:focus-within { outline-color:var(--focus) }
.quote-hero .zip-entry .button { background:var(--button-bg);color:var(--button-text) }
.quote-hero .zip-entry .button:hover { background:var(--button-hover) }
.error,.quote-hero .error { color:var(--error) }
.reassurance-strip { background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow) }
.reassurance-item,.reassurance-item:nth-child(3),.reassurance-item:nth-child(4) { border-color:var(--line) }
.reassurance-item:is(a,button):hover { background:var(--surface-soft) }
.reassurance-icon { background:var(--accent-soft);color:var(--accent) }
.reassurance-item small { color:var(--muted) }
.systems-section,.local-options { background:var(--section);border-color:var(--line) }
.local-options .availability,.availability { background:var(--surface-soft);border-color:var(--line);color:var(--muted) }
.zip-summary>span,.question-zip { background:var(--surface);border-color:var(--line);color:var(--ink) }
.brand-choice,.lineup-card,.system-card { background:var(--surface);border-color:var(--line);box-shadow:var(--shadow) }
.brand-choice:hover,.lineup-card:hover { border-color:var(--line) }
.brand-choice:focus-within { outline-color:var(--focus) }
.brand-price { border-color:var(--line) }
.brand-status { color:var(--accent) }
.brand-review a { color:var(--accent) }
.brand-review small { color:var(--muted) }
.brand-logo-wrap.dark-logo,.comparison-logo.dark-logo,.bubble-logo.dark-logo { background:#303133 }
.product-stage { background:#f2f2ef }
.manufacturer-partners { border-color:var(--line) }
.manufacturer-logo-row img { filter:grayscale(1);opacity:.7 }
.manufacturer-logo-white img { filter:brightness(0);opacity:.55 }
[data-theme="dark"] .manufacturer-logo-row img { filter:brightness(0) invert(.82);opacity:.9 }
/* Keep the approved charcoal logo and original manufacturer marks legible. */
[data-theme="dark"] .eluvi-brand { background:var(--logo-plate);padding:10px 12px;border-radius:10px }
[data-theme="dark"] .brand-logo-wrap:not(.dark-logo),
[data-theme="dark"] .comparison-logo:not(.dark-logo),
[data-theme="dark"] .bubble-logo:not(.dark-logo) { background:#f8f6f2;border-radius:5px;padding:5px 8px }
.path-choice { border-color:var(--line) }
.path-card,.no-match { background:var(--surface);border-color:var(--line) }
.path-card.independent { background:var(--surface-soft) }
.path-icon { background:var(--accent-soft);color:var(--accent) }
.scope-pill { background:var(--surface-soft);border-color:var(--line);color:var(--ink) }
.comparison-table-wrap { background:var(--surface);border-color:var(--line) }
.comparison-table th,.comparison-table td,.comparison-table tbody tr { border-color:var(--line) }
.comparison-table thead,.comparison-table tbody th { background:var(--surface-soft) }
.spacing-comparison-row td { background:var(--selected) }
.spec-status:before { background:var(--accent) }
.spec-status.pending { color:var(--accent) }
.spec-status.pending:before { background:var(--accent) }
.comparison-selectors select { background:var(--surface);border-color:var(--line);color:var(--ink) }
.planner-note>span,.learn-details article>span,.process-grid li>span { color:var(--accent) }
.selected-plan,.number-input,.process-grid li { border-color:var(--line) }
.planner-workspace { background:var(--surface);border-color:var(--line) }
.photo-stage { background:var(--surface-soft);border-color:var(--line) }
.photo-placeholder svg { stroke:var(--accent) }
.photo-stage img { background:#242526 }
.price-section { background:var(--section);color:var(--ink);border-block:1px solid var(--line) }
.price-layout .eyebrow,.price-layout em { color:var(--accent) }
.price-layout>div>p:not(.eyebrow),.receipt-top,.price-receipt li>span:last-child,.receipt-total span { color:var(--muted) }
.price-receipt { background:var(--surface);border-color:var(--line) }
.price-receipt li { color:var(--ink);border-color:var(--line) }
.price-receipt>p { color:var(--muted)!important }
.help-section { background:var(--surface-soft) }
.help-section>div>p:not(.eyebrow) { color:var(--muted) }
.faq summary:after { color:var(--accent) }
.footer { background:var(--surface-soft);border-color:var(--line) }
dialog { background:var(--paper);color:var(--ink);border-color:var(--line);box-shadow:0 25px 100px #00000040 }
dialog::backdrop,.question-guide::backdrop { background:#11121499 }
dialog.support-drawer,dialog.reviews-dialog,dialog.question-guide { background:var(--surface);color:var(--ink);border-color:var(--line) }
.support-close,.question-guide .dialog-close { background:var(--button-bg);color:var(--button-text) }
.support-links,.support-links a,.support-links button,.review-source { border-color:var(--line) }
.support-links a:hover,.support-links button:hover,.support-drawer .support-preview { background:var(--surface-soft) }
.support-links>a>span:first-child,.support-links>button>span:first-child { color:var(--accent) }
.review-context,.review-source p { color:var(--muted) }
.consultation-summary { background:var(--surface-soft);border-color:var(--line) }
dialog .booking-notice { background:var(--accent-soft);color:var(--ink) }
.help-choices button { background:var(--surface);border-color:var(--line) }
.help-choices button:hover,.help-choices button.selected { background:var(--selected);border-color:var(--selected-line) }
.help-choices span { color:var(--accent) }
.questionnaire-progress li { border-color:var(--line);color:var(--muted) }
.questionnaire-progress li[aria-current] { border-color:var(--ink);color:var(--ink) }
.questionnaire-progress li.is-complete { border-color:var(--selected-line);color:var(--accent) }
.question-subtitle,.question-choice small,.question-availability,.question-caption,.questionnaire-footnote { color:var(--muted) }
.bubble-content { border-color:var(--line);background:var(--surface) }
.bubble-content .bubble-test { color:var(--accent) }
.question-choice { background:var(--surface);border-color:var(--line) }
.question-choice:hover { border-color:var(--selected-line) }
.question-choice:has(input:checked),.roof-edge-choice:has(input:checked) { background:var(--selected);border-color:var(--selected-line) }
.question-choice input { accent-color:var(--accent) }
.choice-icon,.illustrated-choice:has(input:checked) .choice-icon { stroke:var(--accent) }
.question-summary,.find-out-bubble { background:var(--surface-soft);color:var(--ink) }
.find-out-bubble:hover { background:var(--surface-hover) }
.question-guide .guide-note,.stories-guide>span { background:var(--surface-soft);color:var(--ink) }
.stories-guide b { background:var(--accent-soft);color:var(--accent) }
.question-fields input,.question-fields select,.footage-input { background:var(--surface);border-color:var(--line);color:var(--ink) }
.question-fields input[readonly] { background:var(--surface-soft) }
.measurement-guide { background:var(--surface-soft);border-color:var(--line) }
.measurement-guide>p { color:var(--muted) }
.measurement-video { border-color:var(--line) }
.measurement-video>span:first-child { background:var(--button-bg);color:var(--button-text) }
.measurement-diagram { background:#f8f6ef;border-radius:12px }
.roof-guide-grid img { background:#eef1e7 }
/* Illustrative lighting remains warm white in either interface theme. */
.spacing-demo,.hero-art,.scene-controls { background:#27282a;color:#f5ebda }
.spacing-top,.demo-note,.scene-controls small { color:#c9c1b4 }
.spacing-house { background:linear-gradient(#817b71,#59544d) }
.spacing-eave { background:#c2b8a4;border-color:#e0d3ba }
.spacing-door { background:#474747;border-color:#b9b09d }
.spacing-window { border-color:#4b4a46 }
.swatch { border-color:#27282a }
@media(max-width:1100px) {
  .header .eluvi-brand { width:190px }
  .header nav { gap:15px }
  .header nav a { font-size:12px }
  .header-actions { gap:9px }
}
@media(max-width:800px) {
  .header nav { display:none }
}
@media(max-width:580px) {
  .header { min-height:90px;height:auto;padding-block:18px;gap:12px }
  .header .eluvi-brand { width:135px }
  .header-actions { gap:8px }
  .theme-switch { padding:3px;gap:1px }
  .theme-switch button { padding:8px 7px;min-height:32px;font-size:10px }
  .theme-switch svg { display:none }
  .header .help-bubble { min-width:58px;min-height:40px;padding:8px;font-size:11px;gap:5px }
  .header .help-bubble svg { width:14px;height:14px }
  [data-theme="dark"] .header .eluvi-brand { padding:9px }
  .questionnaire-header { gap:10px;flex-wrap:wrap }
  .questionnaire-wordmark.eluvi-brand { width:125px }
  .questionnaire-header-actions { gap:10px }
  .questionnaire-header-actions>#question-exit { font-size:10px }
  .reassurance-item { border-color:var(--line) }
}
@media(max-width:359px) {
  .header { flex-wrap:wrap;justify-content:space-between }
  .header .eluvi-brand { width:115px }
  .header-actions { gap:5px }
  .header .help-bubble { min-width:44px;font-size:10px }
  .header .help-bubble svg { display:none }
  .questionnaire-header-actions { width:100%;justify-content:space-between }
}