/* ──────────────────────── Oyuncak: a toy box in pastels ──────────────────────── */

:root[data-skin="oyuncak"] {
  --background: 255 87% 95%;
  --foreground: 250 25% 14%;
  --card: 0 0% 100%;
  --card-foreground: 250 25% 14%;
  --popover: 0 0% 100%;
  --popover-foreground: 250 25% 14%;
  --primary: 47 100% 65%;
  --primary-foreground: 250 25% 14%;
  --secondary: 255 100% 97%;
  --secondary-foreground: 250 25% 14%;
  --muted: 255 70% 94%;
  --muted-foreground: 253 16% 32%;
  --accent: 50 100% 86%;
  --accent-foreground: 250 25% 14%;
  --destructive: 346 78% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 250 25% 14%;
  --input: 250 25% 14%;
  --ring: 250 25% 14%;
  --radius: 1rem;
  --ink: 250 25% 14%;
  --dot: hsl(255 70% 84%);
  --font-body: "Bricolage Grotesque Variable", "Trebuchet MS", system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-label: var(--font-body);
}

:root.dark[data-skin="oyuncak"] {
  --background: 249 30% 12%;
  --foreground: 252 100% 97%;
  --card: 248 30% 19%;
  --card-foreground: 252 100% 97%;
  --popover: 248 30% 19%;
  --popover-foreground: 252 100% 97%;
  --primary: 47 100% 65%;
  --primary-foreground: 250 25% 10%;
  --secondary: 248 28% 24%;
  --secondary-foreground: 252 100% 97%;
  --muted: 248 28% 24%;
  --muted-foreground: 252 35% 82%;
  --accent: 248 30% 29%;
  --accent-foreground: 252 100% 97%;
  --destructive: 346 100% 78%;
  --destructive-foreground: 250 25% 10%;
  --border: 252 45% 80%;
  --input: 252 45% 80%;
  --ring: 47 100% 65%;
  --ink: 252 45% 80%;
  --dot: hsl(252 60% 80% / 0.12);
}

:root[data-skin="oyuncak"] body {
  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}

:root[data-skin="oyuncak"] .font-display {
  font-weight: 800;
  letter-spacing: -0.035em;
}

:root[data-skin="oyuncak"] [data-slot="button"] {
  font-weight: 700;
  transition: transform 0.15s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.15s ease, background-color 0.15s ease;
}
:root[data-skin="oyuncak"] [data-slot="button"]:is([data-variant="default"], [data-variant="destructive"], [data-variant="secondary"], [data-variant="outline"]) {
  border: 2.5px solid hsl(var(--ink));
  border-radius: 14px;
  box-shadow: 3px 3px 0 hsl(var(--ink));
}
:root[data-skin="oyuncak"] [data-slot="button"]:is([data-variant="default"], [data-variant="destructive"], [data-variant="secondary"], [data-variant="outline"]):hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 hsl(var(--ink));
}
:root[data-skin="oyuncak"] [data-slot="button"]:is([data-variant="default"], [data-variant="destructive"], [data-variant="secondary"], [data-variant="outline"]):active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 hsl(var(--ink));
}
:root[data-skin="oyuncak"] [data-slot="button"][data-variant="outline"] {
  background-color: hsl(var(--card));
}
:root[data-skin="oyuncak"] [data-slot="button"][data-variant="ghost"] {
  border-radius: 12px;
}

:root[data-skin="oyuncak"] [data-slot="card"] {
  border-width: 2.5px;
  border-color: hsl(var(--ink));
  border-radius: 22px;
  box-shadow: 5px 5px 0 hsl(var(--ink));
}

:root[data-skin="oyuncak"] [data-slot="badge"] {
  border: 2px solid hsl(var(--ink));
  border-radius: 999px;
  font-weight: 700;
}

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

:root[data-skin="oyuncak"] [data-slot="tabs-list"] {
  height: auto;
  border: 2.5px solid hsl(var(--ink));
  border-radius: 999px;
  background-color: hsl(var(--card));
  box-shadow: 3px 3px 0 hsl(var(--ink));
}
:root[data-skin="oyuncak"] [data-slot="tabs-trigger"] {
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 700;
}
:root[data-skin="oyuncak"] [data-slot="tabs-trigger"][data-state="active"] {
  border-color: hsl(var(--ink));
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: none;
}

/* Every row a card of its own. */
:root[data-skin="oyuncak"] [data-slot="table-container"] {
  padding: 0 6px 6px 2px;
}
:root[data-skin="oyuncak"] [data-slot="table"] {
  border-collapse: separate;
  border-spacing: 0 10px;
}
:root[data-skin="oyuncak"] [data-slot="table"] tr {
  border-bottom: 0;
}
:root[data-skin="oyuncak"] [data-slot="table"] th {
  height: 2rem;
  font-weight: 700;
}
:root[data-skin="oyuncak"] [data-slot="table"] tbody tr,
:root[data-skin="oyuncak"] [data-slot="table"] tbody tr:hover {
  background-color: transparent !important;
}
:root[data-skin="oyuncak"] [data-slot="table"] tbody td {
  border-block: 2.5px solid hsl(var(--ink));
  background-color: var(--row-fill, hsl(var(--card)));
  box-shadow: 0 3px 0 hsl(var(--ink));
}
:root[data-skin="oyuncak"] [data-slot="table"] tbody td:first-child {
  border-left: 2.5px solid hsl(var(--ink));
  border-radius: 18px 0 0 18px;
}
:root[data-skin="oyuncak"] [data-slot="table"] tbody td:last-child {
  border-right: 2.5px solid hsl(var(--ink));
  border-radius: 0 18px 18px 0;
  box-shadow: 0 3px 0 hsl(var(--ink)), 3px 3px 0 hsl(var(--ink));
}
:root[data-skin="oyuncak"] [data-slot="table"] tbody td:only-child {
  border-radius: 18px;
}

:root[data-skin="oyuncak"] :is([data-slot="overlay"], [data-slot="dialog"]) {
  border: 2.5px solid hsl(var(--ink));
  border-radius: 20px;
  box-shadow: 6px 6px 0 hsl(var(--ink));
}
:root[data-skin="oyuncak"] [data-slot="tooltip"] {
  border: 2px solid hsl(var(--ink));
  border-radius: 12px;
}

:root[data-skin="oyuncak"] [data-slot="avatar"] {
  border: 2px solid hsl(var(--ink));
  font-weight: 800;
}

:root[data-skin="oyuncak"] [data-slot="checkbox"] {
  border-width: 2px;
  border-color: hsl(var(--ink));
  border-radius: 6px;
}
:root[data-skin="oyuncak"] [data-slot="switch"] {
  border-color: hsl(var(--ink));
}

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

:root[data-skin="oyuncak"] a[data-slot="card"]:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 hsl(var(--ink));
}
:root[data-skin="oyuncak"] a[data-slot="card"] {
  transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.18s ease;
}

:root[data-skin="oyuncak"] [data-slot="board-column"] {
  border: 2.5px dashed hsl(var(--ink));
  border-radius: 24px;
  background-color: hsl(var(--card) / 0.45);
}

:root[data-skin="oyuncak"] [data-slot="segmented"] {
  border: 2.5px solid hsl(var(--ink));
  border-radius: 999px;
  background-color: hsl(var(--card));
  box-shadow: 3px 3px 0 hsl(var(--ink));
}
:root[data-skin="oyuncak"] [data-slot="segmented"] > button {
  border-radius: 999px;
}
:root[data-skin="oyuncak"] [data-slot="segmented"] > [aria-pressed="true"] {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: inset 0 0 0 2px hsl(var(--ink));
}

:root[data-skin="oyuncak"] [data-slot="nav-bar"] {
  border-top: 2.5px solid hsl(var(--ink));
  border-bottom: 2.5px solid hsl(var(--ink));
  background-color: hsl(var(--card));
}
:root[data-skin="oyuncak"] [data-slot="app-header"] {
  border-bottom: 2.5px solid hsl(var(--ink));
}
:root[data-skin="oyuncak"] [data-slot="app-header"]:has(> [data-slot="nav-bar"]) {
  border-bottom: 0;
}
:root[data-skin="oyuncak"] [data-slot="nav-link"] {
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 600;
}
:root[data-skin="oyuncak"] [data-slot="nav-link"]:is([aria-current="page"], [data-active]) {
  border-color: hsl(var(--ink));
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: none;
}
:root[data-skin="oyuncak"] [data-slot="logo"] {
  border: 2.5px solid hsl(var(--ink));
  border-radius: 12px;
}

:root[data-skin="oyuncak"] [data-slot="project-icon"] {
  border: 2.5px solid hsl(var(--ink));
  border-radius: 18px;
  box-shadow: 3px 3px 0 hsl(var(--ink));
  transform: rotate(-4deg);
}

:root[data-skin="oyuncak"] [data-slot="progress"] {
  border: 2.5px solid hsl(var(--ink));
  background-color: hsl(var(--card));
}
:root[data-skin="oyuncak"] [data-slot="progress-fill"] {
  border-right: 2.5px solid hsl(var(--ink));
  background-color: hsl(var(--primary));
  background-image: repeating-linear-gradient(-45deg, hsl(var(--ink) / 0.14) 0 8px, transparent 8px 16px);
  background-size: 22.6px 22.6px;
  animation: oyuncak-stripes 1.2s linear infinite;
}
@keyframes oyuncak-stripes {
  to {
    background-position: 22.6px 0;
  }
}

:root[data-skin="oyuncak"] [data-slot="stat"][data-tone] {
  padding: 0.25rem 0.75rem;
  border: 2.5px solid hsl(var(--ink));
  font-weight: 700;
}

:root[data-skin="oyuncak"] [data-slot="banner"] {
  border: 2.5px solid hsl(var(--ink));
  border-radius: 18px;
  box-shadow: 3px 3px 0 hsl(var(--ink));
}

:root[data-skin="oyuncak"] [data-slot="table-frame"] {
  border: 0;
  overflow: visible;
}
:root[data-skin="oyuncak"] [data-slot="table"] tr[data-tone="in_progress"] {
  --row-fill: hsl(205 100% 93%);
}
:root[data-skin="oyuncak"] [data-slot="table"] tr[data-tone="done"] {
  --row-fill: hsl(152 70% 92%);
}
:root[data-skin="oyuncak"] [data-slot="table"] tr[data-tone="warning"] {
  --row-fill: hsl(30 100% 92%);
}
:root[data-skin="oyuncak"] [data-slot="table"] tr:is([data-tone="critical"], [data-tone="overdue"]) {
  --row-fill: hsl(342 100% 93%);
}
:root.dark[data-skin="oyuncak"] [data-slot="table"] tr[data-tone="in_progress"] {
  --row-fill: hsl(210 45% 24%);
}
:root.dark[data-skin="oyuncak"] [data-slot="table"] tr[data-tone="done"] {
  --row-fill: hsl(158 35% 20%);
}
:root.dark[data-skin="oyuncak"] [data-slot="table"] tr[data-tone="warning"] {
  --row-fill: hsl(28 45% 23%);
}
:root.dark[data-skin="oyuncak"] [data-slot="table"] tr:is([data-tone="critical"], [data-tone="overdue"]) {
  --row-fill: hsl(342 45% 25%);
}

@media (prefers-reduced-motion: reduce) {
  :root[data-skin="oyuncak"] [data-slot="progress-fill"] {
    animation: none;
  }
}