:root {
  --violet: var(--colony-canvas, #b394f9);
  --accent: var(--colony-accent, hsl(258 90% 66%));
  --pale: var(--colony-canvas-mid, #ded4f7);
  --paper: var(--colony-canvas-light, #f3effa);
  --theme-line: color-mix(in srgb, var(--accent) 18%, white);
  --theme-text: color-mix(in srgb, var(--accent) 30%, #454545);
}
.hero {
  background-color: var(--violet);
}
.workspace,
.access {
  background: var(--paper);
}
.access {
  border-color: var(--theme-line);
}
.preview-titlebar,
.work-document,
.open-work {
  background: color-mix(in srgb, var(--paper) 55%, white);
}
.preview-sidebar {
  background: color-mix(in srgb, var(--pale) 70%, white);
}
.preview-sidebar button[aria-pressed="true"],
.preview-sidebar button:hover {
  background: var(--pale);
  color: var(--theme-text);
}
.ai-avatar,
.preview-team i {
  background: var(--accent);
}
.job-status,
.person-avatar {
  background: var(--paper);
  color: var(--theme-text);
}
.open-work:hover {
  background: var(--paper);
  border-color: var(--accent);
}
.workspace-preview,
.preview-titlebar,
.conversation-heading,
.open-work,
.preview-composer,
.work-document,
.document-toolbar,
.work-steps li,
.document-note {
  border-color: var(--theme-line);
}
.product-intro > p,
.preview-titlebar,
.preview-sidebar,
.sidebar-label,
.preview-sidebar button,
.preview-team small,
.preview-message p,
.preview-message strong small,
.open-work,
.open-work small,
.file-icon,
.document-toolbar,
.document-toolbar button,
.document-kicker,
.document-description,
.work-steps li > span,
.work-steps p,
.document-note {
  color: var(--theme-text);
}
.preview-lights,
.preview-composer {
  color: color-mix(in srgb, var(--accent) 35%, #888);
}
.workspace-preview {
  box-shadow: 0 25px 65px -40px
    color-mix(in srgb, var(--accent) 35%, transparent);
}
.ant-one,
.small-star,
.project-art > svg {
  color: var(--accent);
}
.back-paper {
  background: var(--pale);
}
.conversation-dot,
.orbit,
.paper {
  border-color: var(--theme-line);
}
:focus-visible {
  outline-color: var(--theme-text);
}

/* Every decorative colour follows the selected palette, including raster art. */
:root {
  --ink: #242424;
  --theme-muted: color-mix(in srgb, var(--accent) 12%, #666);
  --theme-shadow: color-mix(in srgb, var(--accent) 18%, transparent);
  --scout-hue-shift: 0deg;
}
[data-hue="blue"] {
  --scout-hue-shift: -41deg;
}
[data-hue="pink"] {
  --scout-hue-shift: 72deg;
}
[data-hue="amber"] {
  --scout-hue-shift: 140deg;
}
[data-hue="green"] {
  --scout-hue-shift: -98deg;
}
.features h2 > span {
  color: color-mix(in srgb, var(--accent) 75%, #333);
}
.feature-card p,
.access-copy .muted {
  color: var(--theme-muted);
}
.ant-two {
  color: var(--colony-canvas);
}
.conversation-dot,
.front-paper {
  color: var(--theme-text);
}
.paper-title {
  color: var(--ink);
}
.paper i {
  border-color: var(--theme-text);
}
.people-art svg {
  filter: drop-shadow(0 12px 8px var(--theme-shadow));
}
.scout-art img {
  filter: hue-rotate(var(--scout-hue-shift))
    drop-shadow(0 15px 10px var(--theme-shadow));
}
.motion-control {
  background: var(--paper);
  border-color: var(--theme-line);
  color: var(--ink);
}
.motion-control:hover {
  background: var(--pale);
}
.employee-ribbon span {
  background: var(--paper);
  border-color: var(--theme-line);
}
.employee-ribbon span:last-child {
  background: var(--ink);
  border-color: var(--ink);
  color: white;
}
.pill,
.closing-subline {
  color: white;
}
.pill:hover {
  background: var(--theme-text);
}