html:root {
  --cw-main: #3366FF;
  --cw-on-main: #FFFFFF;
  --cw-main-hover: #4372FF;
  --cw-accent: #DD9E0D;
  --cw-on-accent: #0F2260;
}

html:root:not(.dark) {
  --cw-page: #F5F6F9;
  --cw-card: #FFFFFF;
  --cw-hover: #EEF0F4;
  --cw-selected: #E7E9EF;
  --cw-line: #D9DCE6;
  --cw-muted: #52608D;
  --cw-text: #0F2260;
  --cw-indicator: #3366FF;
}

html:root.dark {
  --cw-page: #20316B;
  --cw-card: #2E3F75;
  --cw-hover: #3D4C7E;
  --cw-selected: #465585;
  --cw-line: #52608D;
  --cw-muted: #BCC1D2;
  --cw-text: #FFFFFF;
  --cw-indicator: #DD9E0D;
}

html:root {
  --background: var(--cw-page);
  --foreground: var(--cw-text);
  --card: var(--cw-card);
  --card-foreground: var(--cw-text);
  --popover: var(--cw-card);
  --popover-foreground: var(--cw-text);
  --primary: var(--cw-accent);
  --primary-foreground: var(--cw-on-accent);
  --secondary: var(--cw-selected);
  --secondary-foreground: var(--cw-text);
  --muted: var(--cw-selected);
  --muted-foreground: var(--cw-muted);
  --accent: var(--cw-hover);
  --accent-foreground: var(--cw-text);
  --border: var(--cw-line);
  --input: var(--cw-line);
  --ring: var(--cw-indicator);
  --code: var(--cw-selected);
  --code-foreground: var(--cw-text);
  --code-highlight: var(--cw-hover);
  --sidebar: var(--cw-main);
  --sidebar-foreground: var(--cw-on-main);
  --sidebar-primary: var(--cw-accent);
  --sidebar-primary-foreground: var(--cw-on-accent);
  --sidebar-accent: var(--cw-main-hover);
  --sidebar-accent-foreground: var(--cw-on-main);
  --sidebar-border: var(--cw-main-hover);
  --sidebar-ring: var(--cw-on-main);
}

html:root [data-slot="sidebar"] {
  --background: var(--cw-main);
  --foreground: var(--cw-on-main);
  --muted: var(--cw-main-hover);
  --muted-foreground: var(--cw-on-main);
  --accent: var(--cw-main-hover);
  --accent-foreground: var(--cw-on-main);
  --border: var(--cw-main-hover);
  --input: var(--cw-main-hover);
  --ring: var(--cw-on-main);
  color: var(--cw-on-main);
}

/* sign-in pages */
html:root main:has(img[src="/favicon.svg"].size-10) {
  --background: var(--cw-main);
  --foreground: var(--cw-on-main);
  --muted-foreground: var(--cw-on-main);
  --border: var(--cw-main-hover);
  --input: var(--cw-main-hover);
  --ring: var(--cw-on-main);
}

[data-slot="sidebar"] [data-slot="sidebar-menu-button"][data-active="true"],
[data-slot="sidebar"] [data-slot="sidebar-menu-sub-button"][data-active="true"] {
  background-color: var(--cw-accent);
  color: var(--cw-on-accent);
  font-weight: 600;
}
[data-slot="sidebar"] [data-active="true"] .text-muted-foreground,
[data-slot="sidebar"] [data-slot="sidebar-menu-button"][data-active="true"] ~ button {
  color: var(--cw-on-accent);
}

[data-slot="sidebar-menu-button"] > .bg-foreground.rounded-full {
  background-color: var(--cw-accent);
  color: var(--cw-on-accent);
}
[data-slot="sidebar-menu-button"][data-active="true"] > .bg-foreground.rounded-full {
  background-color: var(--cw-on-accent);
  color: var(--cw-accent);
}

nav a[aria-current="page"].bg-accent {
  background-color: var(--cw-accent);
  color: var(--cw-on-accent);
}

::selection {
  background-color: color-mix(in srgb, var(--cw-accent) 30%, transparent);
}

.dark\:bg-card\/90 [data-kaneo-sortable] > .bg-background {
  background-color: var(--cw-card);
}

/* dark: Kaneo's columns in card, tasks one step lighter */
html.dark .dark\:bg-card\/90 [data-kaneo-sortable] > .bg-background {
  background-color: var(--cw-hover);
}
html.dark .dark\:bg-card\/90 [data-kaneo-sortable] > .ring-inset {
  background-color: var(--cw-hover);
  border-color: var(--cw-indicator);
  box-shadow: 0 0 0 1px var(--cw-indicator), 0 0 22px color-mix(in srgb, var(--cw-accent) 40%, transparent);
}

[data-slot="sidebar-footer"] .inline-grid:has(> [data-slot="switch"]) {
  display: block;
  width: 32px;
  height: 32px;
}
/* Base UI puts a hidden input between the switch and Kaneo's icons, hence ~ */
[data-slot="sidebar-footer"] [data-slot="switch"] ~ span {
  display: none;
}
[data-slot="sidebar-footer"] [data-slot="switch"] {
  display: block;
  inset: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--cw-main-hover);
  border-radius: 50%;
  background-color: transparent;
  color: var(--cw-on-main);
  cursor: pointer;
  isolation: isolate;
  transition: rotate 0.7s cubic-bezier(0.65, 0, 0.35, 1), scale 0.15s ease, border-color 0.2s,
    box-shadow 0.2s;
}
[data-slot="sidebar-footer"] [data-slot="switch"]:hover {
  border-color: var(--cw-on-main);
}
[data-slot="sidebar-footer"] [data-slot="switch"]:active {
  scale: 0.9;
}

/* sized by transform: Chrome snaps small boxes to whole pixels */
[data-slot="sidebar-footer"] [data-slot="switch-thumb"] {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background-color: currentColor;
  box-shadow: none;
  translate: none;
  scale: none;
  transform-origin: center;
  transform: scale(0.5125);
  will-change: auto;
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) 0.05s;
}

[data-slot="sidebar-footer"] [data-slot="switch"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background-color: currentColor;
  transform: rotate(0deg) scale(0.9375);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s, opacity 0.25s ease 0.12s,
    rotate 0.4s ease;
}
[data-slot="sidebar-footer"] [data-slot="switch"]:hover::before {
  rotate: 22.5deg;
}

/* the moon's bite is a disc in the sidebar colour, not a mask */
[data-slot="sidebar-footer"] [data-slot="switch"]::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background-color: var(--cw-main);
  transform: translate(-7.5px, 7.5px) scale(0.825);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1) 0s;
}

html:not(.dark) [data-slot="sidebar-footer"] [data-slot="switch"] {
  rotate: 180deg;
}
html:not(.dark) [data-slot="sidebar-footer"] [data-slot="switch-thumb"] {
  transform: scale(1.05);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.04s;
}
html:not(.dark) [data-slot="sidebar-footer"] [data-slot="switch"]::before {
  opacity: 0;
  transform: rotate(-120deg) scale(0.1875);
  transition: transform 0.4s cubic-bezier(0.55, 0, 0.45, 1), opacity 0.3s ease, rotate 0.4s ease;
}
html:not(.dark) [data-slot="sidebar-footer"] [data-slot="switch"]::after {
  transform: translate(-2.875px, 2.875px) scale(0.825);
  transition-delay: 0.14s;
}
@media (prefers-reduced-motion: reduce) {
  [data-slot="sidebar-footer"] [data-slot="switch"],
  [data-slot="sidebar-footer"] [data-slot="switch"]::before,
  [data-slot="sidebar-footer"] [data-slot="switch"]::after,
  [data-slot="sidebar-footer"] [data-slot="switch-thumb"] {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}

/* Kaneo's wordmark instead of the workspace name, which stays for screen readers */
[data-slot="sidebar-header"] [data-slot="menu-trigger"] > div {
  height: 20px;
  background: var(--cw-on-main);
  -webkit-mask: url("/logo-light.svg") left center / contain no-repeat;
  mask: url("/logo-light.svg") left center / contain no-repeat;
}
[data-slot="sidebar-header"] [data-slot="menu-trigger"] > div > span {
  color: transparent;
}
[data-slot="sidebar-header"] [data-slot="menu-trigger"] > svg {
  display: none;
}

/* sign-in pages: Kaneo's wordmark at the top left instead of the tile */
main:has(img[src="/favicon.svg"].size-10)::before {
  content: "";
  position: fixed;
  inset-block-start: 20px;
  inset-inline-start: 24px;
  width: 104px;
  height: 24px;
  background: var(--cw-on-main);
  -webkit-mask: url("/logo-light.svg") left center / contain no-repeat;
  mask: url("/logo-light.svg") left center / contain no-repeat;
}
@media (max-width: 600px) {
  main:has(img[src="/favicon.svg"].size-10)::before {
    inset-block-start: 12px;
    inset-inline-start: 16px;
  }
}
main img[src="/favicon.svg"].size-10 {
  display: none;
}