/* Orange leads actions; yellow marks small wayfinding details. Product colors are independent. */
:root {
  --ui-bg: #faf9f6;
  --ui-surface: #ffffff;
  --ui-panel: #f2efea;
  --ui-ink: #26231f;
  --ui-copy: #58534c;
  --ui-muted: #71695f;
  --ui-line: #ded7ce;
  --ui-border: #998b7c;
  --ui-brand: #c54b16;
  --ui-brand-text: #a73c10;
  --ui-brand-hover: #aa3c0e;
  --ui-brand-soft: #fff0e6;
  --ui-yellow: #f3c744;
  --ui-yellow-soft: #fff6d8;
  --brand: var(--ui-brand);
  --brand-strong: var(--ui-brand-text);
  --brand-soft: var(--ui-brand-soft);
  --accent: var(--ui-yellow);
  --accent-soft: var(--ui-yellow-soft);
  --green: var(--ui-brand-text);
  --deep: #302c27;
  --deepest: var(--ui-ink);
  --leaf: var(--ui-yellow);
  --lime: var(--ui-yellow);
  --yellow: var(--ui-yellow);
  --mint: var(--ui-panel);
  --cream: var(--ui-bg);
  --paper: var(--ui-bg);
  --ink: var(--ui-ink);
  --copy: var(--ui-copy);
  --muted: var(--ui-muted);
  --line: var(--ui-line);
  --white: var(--ui-surface);
  --neutral-soft: var(--ui-panel);
  --vacuum-surface: var(--ui-panel);
  --turkey-surface: var(--ui-panel);
  --on-dark-copy: #eee8e0;
  --on-dark-muted: #c9c0b5;
  --electric-cyan: var(--ui-yellow);
  --ultraviolet: var(--ui-brand-text);
  --hot-magenta: var(--ui-brand);
  --signal-orange: var(--ui-brand);
  --signal-mint: var(--ui-yellow-soft);
  --carbon: var(--ui-ink);
  --alloy: #302c27;
  --alloy-raised: #413b33;
  --titanium: var(--ui-line);
  --ice: var(--ui-bg);
  --spectral: linear-gradient(90deg, var(--ui-brand) 0 62%, var(--ui-yellow) 62% 100%);
  --shadow: 0 12px 36px #26231f0d;
}
html, body.alassy-site, body.alassy-showroom { background: var(--ui-bg); }
body.alassy-site ::selection, body.alassy-showroom ::selection { background: var(--ui-yellow-soft); color: var(--ui-ink); }
body.alassy-site :focus-visible, body.alassy-showroom :focus-visible { outline-color: var(--ui-brand); }

/* Neutral navigation with an orange active cue. */
.commerce-bar { background: var(--ui-panel); color: var(--ui-copy); }
.site-header, .commerce-header, .site-header.is-compact { background: #faf9f6f7; }
.commerce-nav__menu > li > a:hover, .commerce-nav__menu > li > a[aria-current="page"],
.sr-nav-link[aria-current="page"] { color: var(--ui-brand-text); text-decoration-color: var(--ui-brand); }
.commerce-nav__menu > li > a::after { background: var(--ui-brand); }
.request-badge { background: var(--ui-brand); color: #fff; }
.site-header::after, .commerce-header::after { background: var(--spectral); }

/* One primary action style, consistent for keyboard, pointer and touch. */
body.alassy-site .button--lime, body.alassy-site .button--dark,
.preroll-template-download, .showroom-page .sr-next a,
.showroom-page .inspecting #return-part, .mobile-exit [data-exit-stay] {
  background: var(--ui-brand); border-color: var(--ui-brand); color: #fff;
}
body.alassy-site .button--lime:hover, body.alassy-site .button--dark:hover,
.preroll-template-download:hover, .showroom-page .sr-next a:hover,
.showroom-page .inspecting #return-part:hover, .mobile-exit [data-exit-stay]:hover {
  background: var(--ui-brand-hover); border-color: var(--ui-brand-hover); color: #fff;
}
body.alassy-site .button--outline { color: var(--ui-brand-text); border-color: var(--ui-border); background: transparent; }
body.alassy-site .button--outline:hover { background: var(--ui-brand-soft); border-color: var(--ui-brand); color: var(--ui-brand-text); }
input, select, textarea { accent-color: var(--ui-brand); }
body.alassy-site input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
body.alassy-site select, body.alassy-site textarea { border-color: var(--ui-border); }
body.alassy-site input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
body.alassy-site select:focus, body.alassy-site textarea:focus { border-color: var(--ui-brand); box-shadow: 0 0 0 3px #c54b161a; }

/* Short warm accents, ample neutral space around vivid product photography. */
.tube-home__hero, .preroll-hero, .page-hero, .wholesale-hero, .design-library-hero { background-color: var(--ui-bg); }
.tube-home__hero h1 em, .preroll-hero h1 em { color: var(--ui-ink); }
.tube-home__hero .eyebrow {
  border-bottom: 0;
  background: linear-gradient(90deg, var(--ui-brand) 0 42px, var(--ui-yellow) 42px 92px, var(--ui-line) 92px 100%) left bottom / 100% 2px no-repeat;
}
.tube-home__trust { background: var(--ui-panel); }
.tube-home__trust li:nth-child(n) strong { color: var(--ui-brand-text); }
.tube-home__ticker, .sr-home, .preroll-facts, .order-essentials { background: var(--ui-panel); }
.sr-home__badge { background: var(--ui-yellow-soft); color: var(--ui-ink); border-color: var(--ui-yellow); }
.sr-home__steps b { color: var(--ui-ink); background: var(--ui-yellow-soft); border-bottom: 2px solid var(--ui-yellow); padding: 3px 5px; font-weight: 600; }
.sr-home__caption { background: var(--ui-bg); color: var(--ui-copy); }
.sr-home__visual { background: var(--ui-panel); }
.sr-gallery-entry, .sr-box-open { background: var(--ui-bg); color: var(--ui-brand-text); border-color: var(--ui-line); }
.sr-gallery-entry:hover, .sr-box-open:hover { background: var(--ui-brand-soft); }
.tube-scroll-story__chapter { --story-panel: var(--ui-panel); --story-panel-ink: var(--ui-ink); --story-panel-muted: var(--ui-copy); }
.tube-scroll-story__chapter--sand { --story-panel: #f5f1e9; }
.tube-scroll-story__chapter--lime { --story-panel: #f4f2eb; }
.tube-scroll-story__chapter--night { --story-panel: var(--ui-ink); --story-panel-ink: var(--ui-bg); --story-panel-muted: #ddd5c9; }
body.alassy-site .tube-scroll-story__chapter--night .eyebrow { color: var(--ui-yellow); }

/* Selected options use pale fills instead of large blocks of orange. */
.box-format input:checked + span, .box-style input:checked + span,
.preroll-design-path.is-active, .preroll-finish-grid input:checked + span,
.preroll-uv-path-grid input:checked + span, .preroll-preview-modes button.is-active {
  border-color: var(--ui-brand); background: var(--ui-brand-soft); box-shadow: inset 0 0 0 1px var(--ui-brand);
}
.box-gallery__modes button[aria-pressed="true"], .template-filter-row button.is-active {
  background: var(--ui-brand); border-color: var(--ui-brand); color: #fff;
}
.preroll-progress { background: var(--ui-bg); border-color: var(--ui-line); }
.preroll-progress a, .preroll-progress .is-complete { color: var(--ui-ink); }
.preroll-progress .is-complete { background: var(--ui-yellow-soft); }
.preroll-estimate { background: var(--ui-panel); border-color: var(--ui-line); }
.preroll-model-navigation button[aria-pressed="true"] { background: var(--ui-ink); color: #fff; }
.preroll-tier-suggestion { background: var(--ui-yellow-soft); color: var(--ui-ink); border-color: var(--ui-yellow); }
.preroll-quick-estimate { background: var(--ui-panel); border-color: var(--ui-line); }
.preroll-quick-estimate strong { color: var(--ui-brand-text); }
.preroll-quick-estimate .button { background: var(--ui-brand); color: #fff; }
.preroll-quick-estimate .button:hover { background: var(--ui-brand-hover); }
.preroll-live-indicator { color: var(--ui-ink) !important; background: var(--ui-yellow-soft); }
.preroll-order-form label, .preroll-logo-mode legend,
.preroll-compliance-builder__head .preroll-step-label,
.account-form label:not(.account-check), .account-product-checks legend { color: var(--ui-ink); }
.preroll-production-timeline { color: var(--ui-copy); background: var(--ui-panel); border-color: var(--ui-line); }
.packaging-path a { color: var(--ui-brand-text); }
.packaging-path strong { color: var(--ui-ink); }
.packaging-path .shell > span, body.alassy-site .principle-card > span { color: var(--ui-muted); }

/* The embedded viewer gets the same palette without changing scene materials or lighting. */
.showroom-page { --ink: var(--ui-ink); --sage: var(--ui-brand); --muted: var(--ui-muted); --line: var(--ui-line); }
.showroom-page .models [data-model].active { background: var(--ui-brand-soft); color: var(--ui-brand-text); }
.showroom-page .models [data-model].active::after { background: var(--ui-brand); }
.showroom-page .stage { background: #d9dad3; }
.showroom-page .parts button[aria-pressed=true], .sr-lightbox .parts button[aria-pressed=true] {
  background: var(--ui-brand-soft); border-color: var(--ui-brand); color: var(--ui-brand-text);
}
.sr-touch-layout #sr-touch-parts button { background: var(--ui-bg); border-color: var(--ui-border); color: var(--ui-ink); }
.sr-touch-layout #sr-touch-parts button small { color: var(--ui-copy); }
.sr-touch-layout #sr-touch-parts button[aria-pressed=true] { background: var(--ui-brand); border-color: var(--ui-brand); color: #fff; }
.sr-touch-layout #sr-touch-parts button[aria-pressed=true] small { color: #fff; }
.sr-touch-layout #sr-touch-parts button:active { background: var(--ui-brand-soft); color: var(--ui-brand-text); }
.sr-touch-layout #sr-touch-parts button:active small { color: var(--ui-brand-text); }
.showroom-page #pick-hint { background: #26231fed; }
.showroom-page #pick-hint.surface-pick { color: var(--ui-ink); background: none; }

/* A charcoal footer closes the page; warm accents stay small. */
.site-footer, .commerce-footer { background: var(--ui-ink); color: var(--ui-bg); }
.tube-home__final { background-color: var(--ui-ink); }
.tube-home__final .text-link { color: var(--ui-bg); }
body.alassy-site .tube-home__final .eyebrow { color: var(--ui-yellow); }
.wholesale-band { background: var(--ui-ink); }
.wholesale-band p:not(.eyebrow) { color: var(--on-dark-copy); }
.site-footer::before { height: 3px; background: linear-gradient(90deg, var(--ui-brand) 0 24%, var(--ui-yellow) 24% 32%, #494238 32%); }
.footer-contact a, .footer-bottom a, .commerce-footer__brand > a:not(.brand-lockup),
.commerce-footer__nav a:hover { color: var(--ui-yellow); }
.product-film__play { background: var(--ui-yellow); color: var(--ui-ink); }
.product-film__play:hover { background: var(--ui-yellow-soft); }
@media (forced-colors: active) {
  .box-format input:checked + span, .box-style input:checked + span,
  .showroom-page .models [data-model].active { outline: 2px solid Highlight; outline-offset: -2px; }
}