/* Shared theme contract. Components choose a role; palettes own the colors.
   RGB channels let Tailwind opacity modifiers use the same tokens. */
:root {
  color-scheme: light;
  --vault-canvas-rgb: 255 255 255;
  --vault-surface-rgb: 243 244 246;
  --vault-raised-rgb: 229 231 235;
  --vault-foreground-rgb: 17 24 39;
  --vault-muted-rgb: 100 110 125;
  --vault-edge-rgb: 203 213 225;
  --vault-accent-rgb: 29 78 216;
  --vault-accent-soft-rgb: 219 234 254;
  --vault-primary-rgb: 37 99 235;
  --vault-on-primary-rgb: 255 255 255;
  --vault-canvas: rgb(var(--vault-canvas-rgb));
  --vault-surface: rgb(var(--vault-surface-rgb));
  --vault-raised: rgb(var(--vault-raised-rgb));
  --vault-foreground: rgb(var(--vault-foreground-rgb));
  --vault-muted: rgb(var(--vault-muted-rgb));
  --vault-edge: rgb(var(--vault-edge-rgb));
  --vault-accent: rgb(var(--vault-accent-rgb));
  --vault-accent-soft: rgb(var(--vault-accent-soft-rgb));
  --vault-primary: rgb(var(--vault-primary-rgb));
  --vault-on-primary: rgb(var(--vault-on-primary-rgb));
  /* Compatibility for custom-select consumers. */
  --bg-input: var(--vault-surface);
  --border-color: var(--vault-edge);
  --text-color: var(--vault-foreground);
  --text-color-muted: var(--vault-muted);
}
:root.dark {
  color-scheme: dark;
  --vault-canvas-rgb: 17 24 39;
  --vault-surface-rgb: 31 41 55;
  --vault-raised-rgb: 55 65 81;
  --vault-foreground-rgb: 243 244 246;
  --vault-muted-rgb: 163 172 186;
  --vault-edge-rgb: 75 85 99;
  --vault-accent-rgb: 147 197 253;
  --vault-accent-soft-rgb: 23 45 72;
  --vault-primary-rgb: 37 99 235;
}
:root.skin-villain {
  --vault-canvas-rgb: 255 250 248;
  --vault-surface-rgb: 247 236 235;
  --vault-raised-rgb: 236 216 216;
  --vault-foreground-rgb: 49 22 26;
  --vault-muted-rgb: 120 80 86;
  --vault-edge-rgb: 194 150 155;
  --vault-accent-rgb: 148 32 46;
  --vault-accent-soft-rgb: 246 215 216;
  --vault-primary-rgb: 143 23 27;
}
:root.dark.skin-villain {
  --vault-canvas-rgb: 23 21 26;
  --vault-surface-rgb: 33 25 29;
  --vault-raised-rgb: 48 38 43;
  --vault-foreground-rgb: 245 232 232;
  --vault-muted-rgb: 199 166 168;
  --vault-edge-rgb: 89 48 55;
  --vault-accent-rgb: 232 154 159;
  --vault-accent-soft-rgb: 59 32 40;
  --vault-primary-rgb: 143 23 27;
}
:root.skin-praetorian {
  --vault-canvas-rgb: 255 252 244;
  --vault-surface-rgb: 248 241 222;
  --vault-raised-rgb: 237 225 194;
  --vault-foreground-rgb: 54 39 19;
  --vault-muted-rgb: 112 91 55;
  --vault-edge-rgb: 186 160 110;
  --vault-accent-rgb: 126 78 10;
  --vault-accent-soft-rgb: 241 222 173;
  --vault-primary-rgb: 134 85 20;
}
:root.dark.skin-praetorian {
  --vault-canvas-rgb: 27 23 17;
  --vault-surface-rgb: 40 33 23;
  --vault-raised-rgb: 56 46 32;
  --vault-foreground-rgb: 244 237 222;
  --vault-muted-rgb: 197 179 147;
  --vault-edge-rgb: 104 80 42;
  --vault-accent-rgb: 226 185 85;
  --vault-accent-soft-rgb: 66 48 19;
  --vault-primary-rgb: 134 85 20;
}
html, body {
  background-color: var(--vault-canvas);
  color: var(--vault-foreground);
}
/* Shared components used by any page. Layout/spacing stays with utilities. */
.vault-heading-band {
  background-image: linear-gradient(110deg, var(--vault-canvas), var(--vault-surface) 58%, var(--vault-accent-soft));
}
.vault-panel {
  background-color: var(--vault-surface);
  border: 1px solid var(--vault-edge);
  color: var(--vault-foreground);
  border-radius: 0.375rem;
}
.bg-primary:hover { filter: brightness(1.15); }