/* Shared appearance. Moon is the default accent. System follows the OS. */
html {
  color-scheme: light;
  --ink: #14241c;
  --muted: #3e5348;
  --line: #d5e2da;
  --paper: #f3f6f4;
  --card: #ffffff;
  --header: rgba(243, 246, 244, 0.92);
  --menu: #ffffff;
  --chrome: #f7faf8;
  --bar: #e7eee9;
  --chip: #eef3f0;
  --input: #fbfcfb;
  --sent: #e5f4ec;
  --dot: #d7e3dc;
  --shadow: 0 18px 50px rgba(20, 36, 28, 0.08);
  --security-bg: #14241c;
  --security-ink: #ffffff;
  --security-muted: #c5d7cd;
  --security-line: rgba(255, 255, 255, 0.08);
  --accent: #665cd1;
  --accent-deep: #4e46b8;
  --accent-soft: #ece9fb;
  --on-accent: #ffffff;
  --green: var(--accent);
  --green-deep: var(--accent-deep);
  --green-soft: var(--accent-soft);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e7f0ea;
  --muted: #b4c4ba;
  --line: #2d3b34;
  --paper: #101614;
  --card: #1a221e;
  --header: rgba(16, 22, 20, 0.92);
  --menu: #1a221e;
  --chrome: #161e1b;
  --bar: #2a3530;
  --chip: #24302b;
  --input: #121916;
  --sent: #1a3328;
  --dot: #3a4841;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --security-bg: #0c1210;
  --security-ink: #f4faf6;
  --security-muted: #c5d7cd;
}

html[data-accent="moon"] {
  --accent: #665cd1;
  --accent-deep: #4e46b8;
  --accent-soft: #ece9fb;
  --on-accent: #ffffff;
  --security-link: #c9c4f5;
}
html[data-theme="dark"][data-accent="moon"] {
  --accent-soft: #2c2854;
}

html[data-accent="grass"] {
  --accent: #128c54;
  --accent-deep: #0b4e32;
  --accent-soft: #e5f4ec;
  --on-accent: #ffffff;
  --security-link: #b7ebc9;
}
html[data-theme="dark"][data-accent="grass"] {
  --accent-soft: #163528;
}

html[data-accent="sand"] {
  --accent: #9e7314;
  --accent-deep: #7a560c;
  --accent-soft: #f8efd4;
  --on-accent: #1c1406;
  --security-link: #f3d48a;
}
html[data-theme="dark"][data-accent="sand"] {
  --accent-soft: #3a2e12;
}

.mark rect,
.mark path + path { fill: var(--accent); }
.mark path { fill: #fff; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.appearance-bar {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 14px 0 12px;
}
.appearance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.theme-switch,
.accent-switch {
  display: inline-flex;
  align-items: center;
}
.theme-switch {
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
}
.theme-switch button,
.accent-switch button {
  appearance: none;
  margin: 0;
  font: inherit;
  cursor: pointer;
}
.theme-switch button {
  width: 36px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
}
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.theme-switch svg { display: block; }
.accent-switch { gap: 6px; flex-wrap: wrap; }
.accent-switch button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 620;
  letter-spacing: -0.01em;
}
.accent-switch button:hover {
  color: var(--ink);
}
.accent-switch button[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--ink);
}
.swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}
.swatch.moon { background: #665cd1; }
.swatch.grass { background: #128c54; }
.swatch.sand { background: #9e7314; }
.accent-switch button:focus-visible,
.theme-switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.look-controls { margin: 8px 0 28px; justify-content: flex-start; }
.hero-preview { display: flex; flex-direction: column; gap: 16px; }
.hero-preview .look-controls { margin: 0; }
.palette {
  display: flex;
  gap: 10px;
  margin: 0 0 12px;
}
.palette i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: block;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
}
.palette i.moon { background: #665cd1; }
.palette i.grass { background: #128c54; }
.palette i.sand { background: #9e7314; }

@media (max-width: 720px) {
  .appearance-bar,
  .appearance { justify-content: flex-start; }
}