/* One shared accent system, carried through every workspace and account page. */
:root,
html[data-outfit="blue"] {
  --accent: #0875d1;
  --accent-strong: #075ba4;
  --accent-soft: #eaf5ff;
  --accent-border: #d9eafb;
  --accent-text: #0968b8;
}
html[data-outfit="lavender"] {
  --accent: #7050b5;
  --accent-strong: #54358e;
  --accent-soft: #f1edfb;
  --accent-border: #e4ddf6;
  --accent-text: #6543a5;
}
html[data-outfit="teal"] {
  --accent: #087d83;
  --accent-strong: #066269;
  --accent-soft: #eaf7f6;
  --accent-border: #cfe9e5;
  --accent-text: #09676c;
}
html[data-outfit="rose"] {
  --accent: #ae446f;
  --accent-strong: #883252;
  --accent-soft: #fff0f5;
  --accent-border: #f3dbe6;
  --accent-text: #943559;
}
html[data-outfit="black"] {
  --accent: #333c4c;
  --accent-strong: #192334;
  --accent-soft: #eff2f6;
  --accent-border: #dae0e8;
  --accent-text: #354153;
}
:root {
  --page: #f2f7fc;
  --paper: #fff;
  --ink: #172e4b;
  --text: var(--ink);
  --muted: #5c6f88;
  --border: #e0eaf4;
  --peach: #ffeadc;
  --sun: #fff3bb;
  --theme-ink: var(--ink);
  --theme-muted: var(--muted);
}
html[data-outfit] .bg-contraxis-bg {
  background: var(--page);
}
html[data-outfit] .text-contraxis-ink {
  color: var(--ink);
}
html[data-outfit] .text-contraxis-muted {
  color: var(--muted);
}
html[data-outfit] .text-contraxis-blue,
html[data-outfit] .text-contraxis-cyan {
  color: var(--accent-text);
}
html[data-outfit] .bg-gradient-to-r {
  background: var(--accent);
  color: white;
}
html[data-outfit] input,
html[data-outfit] textarea,
html[data-outfit] select {
  accent-color: var(--accent);
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}
.theme-preview {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}
.theme-preview span {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 1px solid var(--border);
}
.theme-color {
  background: var(--accent);
}
.theme-white {
  background: #fff;
}