/* ───────── Riso: a risograph print, two inks and a yellow on grainy paper ───────── */

:root[data-skin="riso"] {
  --background: 40 18% 93%;
  --foreground: 227 46% 25%;
  --card: 40 25% 96%;
  --card-foreground: 227 46% 25%;
  --popover: 40 25% 97%;
  --popover-foreground: 227 46% 25%;
  --primary: 326 100% 64%;
  --primary-foreground: 230 50% 16%;
  --secondary: 54 100% 82%;
  --secondary-foreground: 227 46% 25%;
  --muted: 40 14% 87%;
  --muted-foreground: 228 25% 36%;
  --accent: 54 100% 78%;
  --accent-foreground: 227 46% 25%;
  --destructive: 326 84% 40%;
  --destructive-foreground: 0 0% 100%;
  --border: 227 46% 25%;
  --input: 227 46% 25%;
  --ring: 326 100% 50%;
  --radius: 0.125rem;
  --riso-pink: 326 100% 64%;
  --riso-blue: 201 100% 37%;
  --riso-yellow: 54 100% 50%;
  --ink-blend: multiply;
  --font-body: "Work Sans Variable", "Helvetica Neue", sans-serif;
  --font-display: "Rubik Mono One", var(--font-body);
  --font-label: var(--font-body);
}

/* By night: fluorescent inks on black paper. */
:root.dark[data-skin="riso"] {
  --background: 240 12% 9%;
  --foreground: 36 33% 93%;
  --card: 240 10% 12%;
  --card-foreground: 36 33% 93%;
  --popover: 240 10% 13%;
  --popover-foreground: 36 33% 93%;
  --primary: 326 100% 66%;
  --primary-foreground: 240 12% 9%;
  --secondary: 240 8% 18%;
  --secondary-foreground: 36 33% 93%;
  --muted: 240 8% 18%;
  --muted-foreground: 250 15% 74%;
  --accent: 240 8% 21%;
  --accent-foreground: 36 33% 96%;
  --destructive: 340 100% 70%;
  --destructive-foreground: 240 12% 9%;
  --border: 36 25% 80%;
  --input: 36 25% 72%;
  --ring: 326 100% 66%;
  --riso-blue: 201 100% 55%;
  --ink-blend: normal;
}

:root[data-skin="riso"] body {
  background-image: url("./riso-grain.png");
  background-size: 240px 240px;
}

/* Titles printed in two passes that didn't quite line up. */
:root[data-skin="riso"] .font-display {
  font-weight: 400;
  text-shadow: 0.07em 0.05em 0 hsl(var(--riso-pink) / 0.7);
}
:root.dark[data-skin="riso"] .font-display {
  text-shadow: 0.07em 0.05em 0 hsl(var(--riso-blue) / 0.8);
}

:root[data-skin="riso"] [data-slot="button"] {
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
:root[data-skin="riso"] [data-slot="button"]:is([data-variant="default"], [data-variant="destructive"]) {
  border: 0;
  box-shadow: 3px 3px 0 hsl(var(--riso-blue));
}
:root[data-skin="riso"] [data-slot="button"]:is([data-variant="default"], [data-variant="destructive"]):hover {
  transform: translate(-1px, -1px) rotate(-1deg);
  box-shadow: 5px 4px 0 hsl(var(--riso-blue));
}
:root[data-skin="riso"] [data-slot="button"]:is([data-variant="outline"], [data-variant="secondary"]) {
  border: 2px solid hsl(var(--foreground));
  background: transparent;
}
:root[data-skin="riso"] [data-slot="button"]:is([data-variant="outline"], [data-variant="secondary"]):hover {
  background-color: hsl(var(--accent));
  mix-blend-mode: var(--ink-blend);
}

:root[data-skin="riso"] [data-slot="card"] {
  border: 2px solid hsl(var(--foreground));
  border-radius: 0;
  box-shadow: 5px 5px 0 hsl(var(--riso-pink) / 0.55);
}

:root[data-skin="riso"] [data-slot="badge"] {
  border-radius: 0;
  font-weight: 700;
  mix-blend-mode: var(--ink-blend);
  transform: rotate(-1.5deg);
}

:root[data-skin="riso"] [data-slot="input"] {
  border-width: 2px;
  background-color: hsl(var(--card));
}

:root[data-skin="riso"] [data-slot="tabs-list"] {
  height: auto;
  gap: 0.4rem;
  padding: 0;
  background: transparent;
}
:root[data-skin="riso"] [data-slot="tabs-trigger"] {
  border: 2px solid hsl(var(--foreground));
  font-weight: 700;
}
:root[data-skin="riso"] [data-slot="tabs-trigger"][data-state="active"] {
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  box-shadow: 4px 4px 0 hsl(var(--riso-pink));
}

:root[data-skin="riso"] [data-slot="table"] th {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 400;
  color: hsl(var(--foreground));
}
:root[data-skin="riso"] [data-slot="table"] tr {
  border-bottom: 2px dotted hsl(var(--foreground) / 0.8);
}

:root[data-skin="riso"] :is([data-slot="overlay"], [data-slot="dialog"]) {
  border: 2px solid hsl(var(--foreground));
  box-shadow: 6px 6px 0 hsl(var(--riso-pink) / 0.6);
}

:root[data-skin="riso"] [data-slot="avatar"] {
  font-weight: 700;
  mix-blend-mode: var(--ink-blend);
}

:root[data-skin="riso"] [data-slot="checkbox"] {
  border-width: 2px;
}

/* ── The pages' own parts ── */

:root[data-skin="riso"] [data-slot="nav-bar"] {
  border-top: 0;
  border-bottom: 3px solid hsl(var(--foreground));
  background: transparent;
}
:root[data-skin="riso"] [data-slot="app-header"] {
  border-bottom: 3px solid hsl(var(--foreground));
  background: transparent;
}
:root[data-skin="riso"] [data-slot="app-header"]:has(> [data-slot="nav-bar"]) {
  border-bottom: 0;
}
:root[data-skin="riso"] [data-slot="nav-link"] {
  font-weight: 600;
}
:root[data-skin="riso"] [data-slot="nav-link"]:is([aria-current="page"], [data-active]) {
  border-radius: 0;
  background-color: hsl(var(--riso-yellow));
  color: hsl(var(--foreground));
  box-shadow: none;
  mix-blend-mode: var(--ink-blend);
  transform: rotate(-1.5deg);
}
:root.dark[data-skin="riso"] [data-slot="nav-link"]:is([aria-current="page"], [data-active]) {
  color: hsl(var(--background));
}
:root[data-skin="riso"] [data-slot="logo"] {
  border-radius: 999px;
  box-shadow: 3px 3px 0 hsl(var(--riso-pink));
}

:root[data-skin="riso"] [data-slot="project-icon"] {
  border-radius: 0;
  border: 0;
  box-shadow: 6px 5px 0 hsl(var(--riso-pink) / 0.8);
}

/* A halftone screen, overprinted in blue as the tasks are done. */
:root[data-skin="riso"] [data-slot="progress"] {
  border-radius: 0;
  background-color: transparent;
  background-image: radial-gradient(hsl(var(--riso-pink)) 1.6px, transparent 2px);
  background-size: 7px 7px;
}
:root[data-skin="riso"] [data-slot="progress-fill"] {
  border-radius: 0;
  background-color: hsl(var(--riso-blue));
  mix-blend-mode: var(--ink-blend);
}

:root[data-skin="riso"] [data-slot="stat"][data-tone] {
  border-radius: 0;
  font-weight: 600;
  mix-blend-mode: var(--ink-blend);
  transform: rotate(-1deg);
}

:root[data-skin="riso"] [data-slot="banner"] {
  border-radius: 0;
  box-shadow: none;
  transform: rotate(-0.3deg);
}

:root[data-skin="riso"] [data-slot="table-frame"] {
  border: 2px solid hsl(var(--foreground));
  border-radius: 0;
}

:root[data-skin="riso"] [data-slot="board-column"] {
  border: 2px dashed hsl(var(--foreground) / 0.7);
  border-radius: 0;
  background: transparent;
}

:root[data-skin="riso"] [data-slot="segmented"] {
  padding: 0;
  border: 2px solid hsl(var(--foreground));
  border-radius: 0;
  background: transparent;
}
:root[data-skin="riso"] [data-slot="segmented"] > button {
  height: 100%;
  border-radius: 0;
}
:root[data-skin="riso"] [data-slot="segmented"] > [aria-pressed="true"] {
  background-color: hsl(var(--foreground));
  color: hsl(var(--background));
  box-shadow: none;
}