/* ───── Ozalit: a technical drawing; by day blue lines on white, by night a blueprint ───── */

:root[data-skin="ozalit"] {
  --background: 210 50% 97%;
  --foreground: 214 80% 24%;
  --card: 0 0% 100%;
  --card-foreground: 214 80% 24%;
  --popover: 0 0% 100%;
  --popover-foreground: 214 80% 24%;
  --primary: 214 80% 26%;
  --primary-foreground: 0 0% 100%;
  --secondary: 212 60% 92%;
  --secondary-foreground: 214 80% 24%;
  --muted: 212 60% 92%;
  --muted-foreground: 214 40% 36%;
  --accent: 212 70% 90%;
  --accent-foreground: 214 80% 22%;
  --destructive: 6 70% 45%;
  --destructive-foreground: 0 0% 100%;
  --border: 214 55% 62%;
  --input: 214 55% 52%;
  --ring: 214 80% 40%;
  --radius: 0rem;
  --line: 214 80% 24%;
  --warn: 35 85% 36%;
  --grid-major: hsl(214 80% 40% / 0.12);
  --grid-minor: hsl(214 80% 40% / 0.05);
  --font-body: "Chivo Variable", "Helvetica Neue", sans-serif;
  --font-display: var(--font-body);
  --font-label: "Chivo Mono Variable", ui-monospace, monospace;
}

:root.dark[data-skin="ozalit"] {
  --background: 214 80% 26%;
  --foreground: 216 100% 97%;
  --card: 214 72% 29%;
  --card-foreground: 216 100% 97%;
  --popover: 214 72% 30%;
  --popover-foreground: 216 100% 97%;
  --primary: 216 100% 97%;
  --primary-foreground: 214 80% 24%;
  --secondary: 214 60% 34%;
  --secondary-foreground: 216 100% 97%;
  --muted: 214 60% 34%;
  --muted-foreground: 216 63% 84%;
  --accent: 214 58% 37%;
  --accent-foreground: 0 0% 100%;
  --destructive: 8 100% 74%;
  --destructive-foreground: 214 80% 18%;
  --border: 215 60% 72%;
  --input: 215 60% 78%;
  --ring: 45 100% 70%;
  --line: 216 100% 97%;
  --warn: 43 100% 70%;
  --grid-major: hsl(216 100% 97% / 0.12);
  --grid-minor: hsl(216 100% 97% / 0.05);
}

:root[data-skin="ozalit"] body {
  background-image: linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}

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

:root[data-skin="ozalit"] [data-slot="button"]:is([data-variant="default"], [data-variant="destructive"], [data-variant="secondary"], [data-variant="outline"]) {
  border: 1.5px solid hsl(var(--line));
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
:root[data-skin="ozalit"] [data-slot="button"][data-variant="outline"] {
  background: transparent;
}
:root[data-skin="ozalit"] [data-slot="button"][data-variant="outline"]:hover {
  background-color: hsl(var(--accent));
}

/* Panels framed with crop marks at their corners, as on a drawing sheet. */
:root[data-skin="ozalit"] :is([data-slot="card"], [data-slot="dialog"]) {
  border: 1.5px solid hsl(var(--line) / 0.75);
  box-shadow: none;
  background-image: linear-gradient(hsl(var(--line)), hsl(var(--line))),
    linear-gradient(hsl(var(--line)), hsl(var(--line))),
    linear-gradient(hsl(var(--line)), hsl(var(--line))),
    linear-gradient(hsl(var(--line)), hsl(var(--line)));
  background-repeat: no-repeat;
  background-position: 6px 6px, 6px 6px, calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px);
  background-size: 12px 1.5px, 1.5px 12px, 12px 1.5px, 1.5px 12px;
}

:root[data-skin="ozalit"] [data-slot="badge"] {
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

:root[data-skin="ozalit"] [data-slot="tabs-list"] {
  gap: 0;
  padding: 0;
  border: 1.5px solid hsl(var(--line));
  background: transparent;
}
:root[data-skin="ozalit"] [data-slot="tabs-trigger"] {
  height: 100%;
  font-family: var(--font-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
:root[data-skin="ozalit"] [data-slot="tabs-trigger"] + [data-slot="tabs-trigger"] {
  border-left: 1.5px solid hsl(var(--line));
}
:root[data-skin="ozalit"] [data-slot="tabs-trigger"][data-state="active"] {
  background-color: hsl(var(--line));
  color: hsl(var(--background));
  box-shadow: none;
}

:root[data-skin="ozalit"] [data-slot="table"] thead tr {
  border-bottom: 3px double hsl(var(--line));
}
:root[data-skin="ozalit"] [data-slot="table"] th {
  font-family: var(--font-label);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* A task running out of time is clouded, as a revision is on a drawing. */
:root[data-skin="ozalit"] [data-slot="table"] tr:is([data-tone="critical"], [data-tone="overdue"]) {
  outline: 1.5px dashed hsl(var(--destructive));
  outline-offset: -5px;
}
:root[data-skin="ozalit"] [data-slot="table"] tr[data-tone="warning"] {
  outline: 1.5px dashed hsl(var(--warn));
  outline-offset: -5px;
}

:root[data-skin="ozalit"] [data-slot="overlay"] {
  border: 1.5px solid hsl(var(--line));
  box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.5);
}
:root[data-skin="ozalit"] [data-slot="tooltip"] {
  font-family: var(--font-label);
}

:root[data-skin="ozalit"] [data-slot="avatar"] {
  border: 1.5px solid currentColor;
  background: transparent;
  font-family: var(--font-label);
}

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

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

/* Square everywhere but the round part callouts (people's initials). */
:root[data-skin="ozalit"] *:not([data-slot="avatar"]),
:root[data-skin="ozalit"] *::before,
:root[data-skin="ozalit"] *::after {
  border-radius: 0 !important;
}

:root[data-skin="ozalit"] [data-slot="nav-bar"] {
  border-top: 1.5px solid hsl(var(--line) / 0.6);
  border-bottom: 1.5px solid hsl(var(--line) / 0.6);
  background: transparent;
}
:root[data-skin="ozalit"] [data-slot="app-header"] {
  border-bottom: 1.5px solid hsl(var(--line) / 0.6);
}
:root[data-skin="ozalit"] [data-slot="app-header"]:has(> [data-slot="nav-bar"]) {
  border-bottom: 0;
}
:root[data-skin="ozalit"] [data-slot="nav-link"] {
  border: 1.5px solid transparent;
  font-family: var(--font-label);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
:root[data-skin="ozalit"] [data-slot="nav-link"]:is([aria-current="page"], [data-active]) {
  border-color: hsl(var(--line));
  background: transparent;
  box-shadow: none;
}
:root[data-skin="ozalit"] [data-slot="logo"] {
  outline: 1.5px solid hsl(var(--line));
  outline-offset: 3px;
}

:root[data-skin="ozalit"] [data-slot="project-icon"] {
  border: 1.5px solid hsl(var(--line));
}

/* A scale: ticks every tenth along the bar. */
:root[data-skin="ozalit"] [data-slot="progress"] {
  position: relative;
  border: 1.5px solid hsl(var(--line));
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), hsl(var(--line) / 0.45) calc(10% - 1px) 10%);
}
:root[data-skin="ozalit"] [data-slot="progress-fill"] {
  background-color: hsl(var(--line));
}

:root[data-skin="ozalit"] [data-slot="stat"][data-tone] {
  border: 1.5px solid currentColor;
  background: transparent;
  font-family: var(--font-label);
  letter-spacing: 0.04em;
}

:root[data-skin="ozalit"] [data-slot="banner"] {
  box-shadow: none;
}
:root[data-skin="ozalit"] [data-slot="banner"]:not([role="alert"]) {
  border: 1.5px dashed hsl(var(--warn));
  background: transparent;
}

:root[data-skin="ozalit"] [data-slot="table-frame"] {
  border: 1.5px solid hsl(var(--line));
  background-color: hsl(var(--card) / 0.85);
}

:root[data-skin="ozalit"] [data-slot="board-column"] {
  border: 1.5px dashed hsl(var(--line) / 0.7);
  background: transparent;
}

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