/*
 * The app's looks (src/lib/skins.ts), chosen per browser and set on <html> as
 * data-skin; each has a light and a dark side (the `dark` class). The default
 * look is globals.css alone. Each other look has a file here: it sets the colour
 * tokens and typefaces, and restyles the shared components through their
 * data-slot attributes and the pages' parts marked the same way; pages add their
 * own touches with the variant of the look's name (arcade:, terminal:…).
 */

:root {
  --font-body: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  --font-display: var(--font-body);
  --font-label: var(--font-body);
}

/* A title's own button (the project switcher) takes the title's lettering. */
.font-display button {
  font-stretch: inherit;
  text-transform: inherit;
}

/* A look's tabs take more room than the default ones: on a narrow screen they wrap. */
:root:not([data-skin="default"]) [data-slot="tabs-list"] {
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 100%;
  height: auto;
}

/* An overdue project's card keeps its red edge over a look's borders. */
:root:not([data-skin="default"]) [data-slot="card"][data-overdue] {
  border-left-width: 5px;
  border-left-color: #dc2626;
}

/* No look moves a button for someone who asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  :root[data-skin] [data-slot="button"] {
    transition: none !important;
  }
  :root[data-skin] [data-slot="button"]:hover,
  :root[data-skin] [data-slot="button"]:active {
    transform: none !important;
  }
}