/* One shared color system. Component CSS uses these roles in every design. */
:root,
:root[data-theme="kobalt"] {
  --paper: #F2F5FA;
  --ink: #17263C;
  --accent: #2454E8;
  --accent-ink: #1842BF;
  --accent-contrast: #FFFFFF;
  --accent-on-dark: #9DB8FF;
  --accent-hover: #1948D4;
  --accent-button-bg: #FFFFFF;
  --accent-button-text: #1842BF;
  --accent-button-hover: #E7EDF6;
  --surface: #FFFFFF;
  --surface-hover: #F9FBFF;
  --surface-muted: #E7EDF6;
  --surface-disabled: #E1E7F1;
  --muted: #5D6B7D;
  --line: #D6DDE8;
  --field-border: #7E8DA1;
  --control-outline: #5D6B7D;
  --on-dark: #F2F5FA;
  --on-dark-muted: #C1CCDD;
  --on-dark-subtle: #A9B8CE;
  --dark-line: #425571;
  --dark-line-soft: #344860;
  --dark-hover: #2B3C54;
  --soft-hover: rgba(23, 38, 60, .08);
  --dark-soft-hover: rgba(242, 245, 250, .1);
  --dialog-shadow: rgba(23, 38, 60, .32);
  --dialog-backdrop: rgba(23, 38, 60, .72);
}

:root[data-theme="orange"] {
  --paper: #F3F0E8;
  --ink: #202422;
  --accent: #F15A24;
  --accent-ink: #B43E1A;
  --accent-contrast: #202422;
  --accent-on-dark: #F15A24;
  --accent-hover: #FF703D;
  --accent-button-bg: #202422;
  --accent-button-text: #F3F0E8;
  --accent-button-hover: #393F39;
  --surface: #FFFCF6;
  --surface-hover: #FFFDF9;
  --surface-muted: #EBECE4;
  --surface-disabled: #E6E7DF;
  --muted: #63685F;
  --line: #D8DAD4;
  --field-border: #848B7F;
  --control-outline: #63685F;
  --on-dark: #F3F0E8;
  --on-dark-muted: #C4C9BF;
  --on-dark-subtle: #AEB6A8;
  --dark-line: #53594F;
  --dark-line-soft: #444B41;
  --dark-hover: #393F39;
  --soft-hover: rgba(32, 36, 34, .08);
  --dark-soft-hover: rgba(243, 240, 232, .1);
  --dialog-shadow: rgba(32, 36, 34, .32);
  --dialog-backdrop: rgba(32, 36, 34, .72);
}

:root[data-theme="petrol"] {
  --paper: #EFF4F0;
  --ink: #123B3B;
  --accent: #B9D3A8;
  --accent-ink: #28675E;
  --accent-contrast: #123B3B;
  --accent-on-dark: #B9D3A8;
  --accent-hover: #A8C798;
  --accent-button-bg: #123B3B;
  --accent-button-text: #EFF4F0;
  --accent-button-hover: #22514D;
  --surface: #F9FCF8;
  --surface-hover: #FCFFFA;
  --surface-muted: #E8F0E8;
  --surface-disabled: #DDE6DF;
  --muted: #55716A;
  --line: #CBD9D1;
  --field-border: #748B7D;
  --control-outline: #55716A;
  --on-dark: #EFF4F0;
  --on-dark-muted: #C6DAD0;
  --on-dark-subtle: #B4CEC3;
  --dark-line: #42625C;
  --dark-line-soft: #36534F;
  --dark-hover: #22514D;
  --soft-hover: rgba(18, 59, 59, .08);
  --dark-soft-hover: rgba(239, 244, 240, .1);
  --dialog-shadow: rgba(18, 59, 59, .32);
  --dialog-backdrop: rgba(18, 59, 59, .72);
}

:root {
  --accent-fg: var(--accent-contrast);
  --focus: var(--accent-ink);
  --error: var(--accent-ink);
  --placeholder: var(--muted);
  --photo-fallback: #666666;
  --photo-text: #FFFFFF;
  --photo-shade-top: rgba(0, 0, 0, .15);
  --photo-shade-bottom: rgba(0, 0, 0, .4);
  --photo-shade-strong: rgba(0, 0, 0, .64);
  --review-bg: #FFFFFF;
  --review-ink: #252B2B;
  --review-muted: #5F6666;
  --review-line: #DCE0E0;
  --review-hover: #F2F4F4;
  --review-selected: #252B2B;
  --review-selected-text: #FFFFFF;
  --review-kobalt: #2454E8;
  --review-petrol: #B9D3A8;
  --review-orange: #F15A24;
}

/* The same neutral photography makes the three color directions comparable. */
.hero-image-frame > img,
.example-photo img { filter: grayscale(1) contrast(1.03); }

/* A neutral, persistent review bar; no project input is stored by this control. */
html { scroll-padding-top: 94px; }
.design-review { position: sticky; top: 0; z-index: 80; background: var(--review-bg); color: var(--review-ink); border-bottom: 1px solid var(--review-line); }
.design-review-inner { display: flex; align-items: center; justify-content: space-between; gap: 15px 28px; min-height: 65px; padding-block: 10px; }
.design-review-themes { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.design-review-label { font: 500 11px/1.4 var(--body); letter-spacing: .03em; white-space: nowrap; }
.design-theme-options { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.design-review .design-theme-option { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 8px 11px; border: 1px solid var(--review-line); border-radius: 0; background: var(--review-bg); color: var(--review-ink); font: 500 12px/1.3 var(--body); cursor: pointer; }
.design-review .design-theme-option:hover { background: var(--review-hover); }
.design-review .design-theme-option[aria-pressed="true"] { background: var(--review-selected); color: var(--review-selected-text); border-color: var(--review-selected); }
.design-theme-swatch { width: 11px; height: 11px; flex: 0 0 11px; border: 1px solid currentColor; }
[data-theme-select="kobalt"] .design-theme-swatch { background: var(--review-kobalt); }
[data-theme-select="petrol"] .design-theme-swatch { background: var(--review-petrol); }
[data-theme-select="orange"] .design-theme-swatch { background: var(--review-orange); }
.design-page-control { display: flex; align-items: center; gap: 10px; font: 500 11px/1.4 var(--body); }
.design-page-control select { min-height: 36px; max-width: 200px; border: 1px solid var(--review-line); border-radius: 0; background: var(--review-bg); color: var(--review-ink); font: 400 13px/1.4 var(--body); padding: 7px 28px 7px 10px; }
.design-review button:focus-visible,
.design-review select:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 820px) {
  html { scroll-padding-top: 135px; }
  .design-review-inner { align-items: flex-start; gap: 10px 15px; flex-wrap: wrap; }
  .design-review-themes { gap: 7px 12px; }
  .design-page-control { margin-left: auto; }
}
@media (max-width: 560px) {
  .design-review-inner { padding-block: 9px; gap: 9px; }
  .design-review-themes { width: 100%; }
  .design-review-label { width: 100%; font-size: 10px; }
  .design-theme-options { gap: 5px; width: 100%; }
  .design-review .design-theme-option { flex: 1 1 auto; padding-inline: 8px; font-size: 11px; gap: 6px; min-height: 38px; }
  .design-page-control { width: 100%; justify-content: space-between; margin: 0; }
  .design-page-control select { max-width: 220px; flex: 1; min-height: 38px; font-size: 14px; }
  html { scroll-padding-top: 164px; }
}