/* One palette per app, one control system for the ecosystem. */
:root { --ui-hue: 162; --ui-saturation: 15%; }
:root[data-ui-service="home"] { --ui-hue: 112; --ui-saturation: 18%; }
:root[data-ui-service="care"] { --ui-hue: 178; --ui-saturation: 22%; }
:root[data-ui-service="money"] { --ui-hue: 42; --ui-saturation: 31%; }
:root[data-ui-service="ride"] { --ui-hue: 26; --ui-saturation: 30%; }
:root[data-ui-service="photo"] { --ui-hue: 326; --ui-saturation: 20%; }
:root[data-ui-service="explore"] { --ui-hue: 84; --ui-saturation: 23%; }
:root[data-ui-service="school"] { --ui-hue: 227; --ui-saturation: 27%; }
:root[data-ui-service="health"] { --ui-hue: 191; --ui-saturation: 24%; }
:root[data-ui-service="visa"] { --ui-hue: 211; --ui-saturation: 26%; }
:root[data-ui-service="nanny"] { --ui-hue: 18; --ui-saturation: 25%; }
:root[data-ui-service="events"] { --ui-hue: 310; --ui-saturation: 23%; }
:root[data-ui-service="together"] { --ui-hue: 257; --ui-saturation: 23%; }
:root[data-ui-service="legal"] { --ui-hue: 162; --ui-saturation: 15%; }
:root[data-ui-service="cyberneticscore"] { --ui-hue: 216; --ui-saturation: 22%; }
:root, :root[data-ui-theme="light"] {
  --ui-canvas: hsl(var(--ui-hue) var(--ui-saturation) 91%);
  --ui-ink: hsl(var(--ui-hue) 25% 18%);
  --ui-muted: hsl(var(--ui-hue) 12% 32%);
  --ui-edge: hsl(var(--ui-hue) 15% 35% / .30);
  --ui-line: hsl(var(--ui-hue) 16% 40% / .34);
  --ui-glass: hsl(var(--ui-hue) 20% 99% / .50);
  --ui-selected: hsl(var(--ui-hue) 22% 76%);
  --ui-selected-ink: hsl(var(--ui-hue) 35% 17%);
  --ui-accent: hsl(var(--ui-hue) 27% 32%);
  --ui-accent-ink: #f7faf5;
  --ui-danger: #982f29;
}
:root[data-ui-theme="dark"] {
  --ui-canvas: hsl(var(--ui-hue) 26% 23%);
  --ui-ink: #f4f7f2;
  --ui-muted: hsl(var(--ui-hue) 17% 83%);
  --ui-edge: hsl(var(--ui-hue) 15% 82% / .37);
  --ui-line: hsl(var(--ui-hue) 20% 76% / .40);
  --ui-glass: #ffffff0c;
  --ui-selected: hsl(var(--ui-hue) 22% 77%);
  --ui-selected-ink: hsl(var(--ui-hue) 32% 19%);
  --ui-accent: hsl(var(--ui-hue) 24% 81%);
  --ui-accent-ink: hsl(var(--ui-hue) 30% 19%);
  --ui-danger: #ffd0c6;
}
:root {
  --ui-canvas-fill: radial-gradient(ellipse 17% 57% at 0 70%, var(--ui-edge), transparent 72%), radial-gradient(ellipse 16% 64% at 100% 76%, var(--ui-edge), transparent 70%), var(--ui-canvas);
}

:root[data-ui-theme="dark"][data-ui-service="legal"]{--ui-canvas:#29454b;}