/*
 * CSS Custom Properties
 * 37signals spacing system: 1ch × 1rem base
 */

:root {
  /* Spacing system - consistent 1ch × 1rem base */
  --inline-space: 1ch;
  --inline-space-half: 0.5ch;
  --inline-space-double: 2ch;
  --inline-space-triple: 3ch;
  --inline-space-quad: 4ch;

  --block-space: 1rem;
  --block-space-half: 0.5rem;
  --block-space-double: 2rem;
  --block-space-triple: 3rem;
  --block-space-quad: 4rem;

  /* Typography scale */
  --text-xx-small: 0.65rem;
  --text-x-small: 0.75rem;
  --text-small: 0.85rem;
  --text-normal: 1rem;
  --text-medium: 1.1rem;
  --text-large: 1.5rem;
  --text-x-large: 2rem;
  --text-xx-large: 2.5rem;

  /* Line heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-loose: 1.8;

  /* Border radius */
  --radius-small: 0.25rem;
  --radius: 0.5rem;
  --radius-large: 1rem;

  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition: 250ms ease-in-out;
  --transition-slow: 400ms ease-in-out;

  /* Animation durations */
  --animation-duration-fast: 200ms;
  --animation-duration: 350ms;
  --animation-duration-slow: 500ms;

  /* Easing functions */
  --animation-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Spring overshoot */
  --animation-ease-out: cubic-bezier(0.33, 1, 0.68, 1); /* Smooth ease-out */

  /* Animation scales */
  --animation-scale-small: 1.02;
  --animation-scale-medium: 1.05;
  --animation-scale-large: 1.08;

  /* Animation distances */
  --animation-distance-small: 4px;
  --animation-distance-medium: 8px;
  --animation-distance-large: 16px;

  /* Z-index stack */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 1000;
  --z-notification: 1100;

  /* Max widths */
  --max-width-text: 65ch;
  --max-width-content: 80ch;
  --max-width-wide: 1200px;

  /* Navigation */
  --nav-width: 240px;
  --nav-height-mobile: 4rem;

  /* App shell */
  --shell-gutter: 0.625rem;
}
/*
 * CSS Reset
 * Minimal reset for consistent cross-browser behavior
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  font-size: 100%;
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 768px) {
  html {
    font-size: 87.5%;
  }
}

body {
  padding: 0;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    "Roboto",
    sans-serif;
  background-color: var(--color-bg);
  color: var(--color-fg);
}

img,
svg {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}
/*
 * Typography
 * Headings, paragraphs, and text elements
 */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block-start: var(--block-space-double);
  margin-block-end: var(--block-space);
  line-height: var(--line-height-tight);
  color: var(--color-fg-darkest);
}

h1 {
  font-size: var(--text-xx-large);
}
h2 {
  font-size: var(--text-x-large);
}
h3 {
  font-size: var(--text-large);
}
h4 {
  font-size: var(--text-medium);
}
h5 {
  font-size: var(--text-normal);
}
h6 {
  font-size: var(--text-small);
}

p {
  margin-block: var(--block-space);
  max-inline-size: var(--max-width-text);
}

a {
  color: var(--color-primary);
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-blue);
}

a:visited {
  color: var(--color-violet);
}

*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}

ul,
ol {
  padding-inline-start: var(--inline-space-double);
  margin-block: var(--block-space);
}

li {
  margin-block: var(--block-space-half);
}

code,
kbd,
samp,
pre {
  font-family: "MonoLisa", "SF Mono", "Monaco", "Consolas", monospace;
  font-size: 0.9em;
}

code,
kbd,
samp {
  padding: 0.125em 0.25em;
  background-color: var(--color-bg-darker);
  border-radius: var(--radius-small);
}

pre {
  padding: var(--block-space);
  background-color: var(--color-bg-darker);
  border-radius: var(--radius);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background: none;
}

hr {
  border: none;
  border-block-start: 1px solid var(--color-bg-darker);
  margin-block: var(--block-space-double);
}

blockquote {
  margin-inline-start: var(--inline-space-double);
  padding-inline-start: var(--inline-space);
  border-inline-start: 4px solid var(--color-bg-darker);
  color: var(--color-fg-lighter);
}
/*
 * Animations
 * Whimsical micro-interactions for interactive elements
 * Inspired by Josh W Comeau's animation principles
 */

@media (prefers-reduced-motion: no-preference) {
  /* =====================================================
     Keyframe Definitions
     ===================================================== */

  /* Button: Boop animation with spring overshoot */
  @keyframes button-boop {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(var(--animation-scale-large));
    }
    100% {
      transform: scale(var(--animation-scale-medium));
    }
  }

  /* Link: Underline wiggle animation */
  @keyframes link-underline-wiggle {
    0% {
      transform: scaleX(0);
    }
    60% {
      transform: scaleX(1.05);
    }
    100% {
      transform: scaleX(1);
    }
  }

  /* Input: Focus pulse with expanding glow */
  @keyframes input-focus-pulse {
    0% {
      box-shadow: 0 0 0 0 oklch(from var(--color-primary) l c h / 0.7);
    }
    70% {
      box-shadow: 0 0 0 12px oklch(from var(--color-primary) l c h / 0);
    }
    100% {
      box-shadow: 0 0 0 0 oklch(from var(--color-primary) l c h / 0);
    }
  }

  /* Details: Content expand with fade */
  @keyframes details-expand {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Flash: Message slide-in from top with bounce */
  @keyframes flash-enter {
    0% {
      opacity: 0;
      transform: translateY(-100%);
    }
    70% {
      opacity: 1;
      transform: translateY(8px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Checkbox/Radio: Pop animation on check */
  @keyframes checkbox-pop {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.3);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Focus: Outline expand from small to full size */
  @keyframes focus-ring-draw {
    from {
      outline-width: 1px;
      outline-offset: 0;
    }
    to {
      outline-width: 2px;
      outline-offset: 2px;
    }
  }

  /* Progress: Shimmer for indeterminate state */
  @keyframes progress-shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  /* Table Row: Fade-in */
  @keyframes table-row-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Table Cell: Highlight pulse for updated cells */
  @keyframes table-cell-highlight {
    0% {
      background-color: oklch(0.95 0.08 85); /* Soft yellow */
    }
    100% {
      background-color: transparent;
    }
  }

  /* Turbo: Slide in from right */
  @keyframes turbo-slide-in-right {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Turbo: Slide in from top */
  @keyframes turbo-slide-in-top {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Turbo: Slide in from bottom */
  @keyframes turbo-slide-in-bottom {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Turbo: Fade out with scale down */
  @keyframes turbo-fade-out {
    from {
      opacity: 1;
      transform: scale(1);
    }
    to {
      opacity: 0;
      transform: scale(0.95);
    }
  }

  /* Turbo: Highlight update flash */
  @keyframes turbo-highlight-update {
    0% {
      background-color: oklch(0.95 0.05 85); /* Soft yellow */
    }
    100% {
      background-color: transparent;
    }
  }

  /* Sort Arrow: Spin animation */
  @keyframes sort-arrow-bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2px);
    }
  }

  /* =====================================================
     Animation Applications
     ===================================================== */

  /* Buttons: Boop on hover */
  button:not(:disabled):hover {
    animation: button-boop var(--animation-duration) var(--animation-spring);
    transform: scale(var(--animation-scale-medium));
  }

  button:focus-visible {
    animation: focus-ring-draw var(--animation-duration-fast) ease-out forwards;
  }

  /* Links: Underline wiggle on hover (not sidebar nav links — they get their
     own pill-background + lift hover treatment, see 2_modules/10_navigation.css) */
  a:not([class]):not(body > header nav a) {
    position: relative;
  }

  a:not([class]):not(body > header nav a)::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--animation-duration) ease-out;
  }

  a:not([class]):not(body > header nav a):hover::after {
    animation: link-underline-wiggle var(--animation-duration) var(--animation-spring);
    transform: scaleX(1);
  }

  /* Form Inputs: Focus pulse glow */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    animation: input-focus-pulse var(--animation-duration-slow) ease-out;
  }

  /* Details/Summary: Expand animation */
  details[open] > :not(summary) {
    animation: details-expand var(--animation-duration) var(--animation-ease-out);
  }

  /* Summary Arrow: Rotate on toggle */
  details > summary {
    cursor: pointer;
  }

  details > summary::marker {
    animation: sort-arrow-bounce var(--animation-duration) var(--animation-spring);
  }

  /* Checkboxes: Pop on check */
  input[type="checkbox"],
  input[type="radio"] {
    animation: none;
  }

  input[type="checkbox"]:checked,
  input[type="radio"]:checked {
    animation: checkbox-pop var(--animation-duration-fast) ease-out;
  }

  /* Flash Messages: Slide in with bounce */
  aside[role="alert"],
  aside[role="status"] {
    animation: flash-enter var(--animation-duration-slow) var(--animation-spring);
  }

  /* Progress Bar: Shimmer for indeterminate */
  progress:not([value]) {
    background: linear-gradient(
      90deg,
      var(--color-bg-lighter) 25%,
      var(--color-bg) 50%,
      var(--color-bg-lighter) 75%
    );
    background-size: 200% 100%;
    animation: progress-shimmer 1.5s ease-in-out infinite;
  }

  /* Table Rows: Fade-in with stagger */
  tbody tr {
    animation: table-row-fade-in var(--animation-duration) var(--animation-ease-out) backwards;
  }

  /* Staggered row delays */
  tbody tr:nth-child(1) { animation-delay: 0ms; }
  tbody tr:nth-child(2) { animation-delay: 40ms; }
  tbody tr:nth-child(3) { animation-delay: 80ms; }
  tbody tr:nth-child(4) { animation-delay: 120ms; }
  tbody tr:nth-child(5) { animation-delay: 160ms; }
  tbody tr:nth-child(n+6) { animation-delay: 200ms; }

  /* Table Row: Hover effect */
  tbody tr {
    transition: background-color 150ms ease-out, transform 150ms ease-out;
  }

  tbody tr:hover {
    transform: scale(1.002);
  }

  /* Table Header: Sortable indicator animation */
  th[data-sort-direction="asc"]::after,
  th[data-sort-direction="desc"]::after {
    animation: sort-arrow-bounce var(--animation-duration) var(--animation-spring);
  }

  /* Turbo Stream: Append/Prepend animations */
  [data-turbo-stream-transition="slide-in"] {
    animation: turbo-slide-in-right var(--animation-duration) var(--animation-spring);
  }

  [data-turbo-stream-transition="slide-in-top"] {
    animation: turbo-slide-in-top var(--animation-duration) var(--animation-spring);
  }

  [data-turbo-stream-transition="slide-in-bottom"] {
    animation: turbo-slide-in-bottom var(--animation-duration) var(--animation-spring);
  }

  /* Turbo Stream: Update highlight */
  [data-turbo-stream-transition="highlight"],
  [data-updated] {
    animation: turbo-highlight-update 800ms ease-out;
  }

  /* Turbo Stream: Fade out for removal */
  [data-turbo-stream-transition="fade-out"] {
    animation: turbo-fade-out var(--animation-duration) ease-out forwards;
  }

  /* Utility classes for Stimulus controllers */
  .animating-in {
    animation: turbo-slide-in-right var(--animation-duration) var(--animation-spring);
  }

  .animating-out {
    animation: turbo-fade-out var(--animation-duration) ease-out forwards;
  }

  .highlight-update {
    animation: turbo-highlight-update 800ms ease-out;
  }
}

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/*
 * Header
 * App shell: body grid layout and header sidebar positioning.
 * Navigation appearance lives in 2_modules/10_navigation.css
 */

body {
  display: grid;
  grid-template-columns: var(--nav-width) 1fr;
  grid-template-rows: 1fr auto;
  min-block-size: 100dvh;
  padding: var(--shell-gutter);
  column-gap: var(--shell-gutter);
}

body > header {
  grid-column: 1;
  grid-row: 1 / -1;
  /* Without this, Grid's default stretch makes header match main's height
     (which can be far taller than the nav), instead of sizing to its own
     content with min-block-size as a floor. */
  align-self: start;
  position: sticky;
  top: var(--shell-gutter);
  min-block-size: calc(100dvh - 2 * var(--shell-gutter));
  block-size: auto;
  overflow-y: visible;
  border-radius: var(--radius-large);
  box-shadow: 0 8px 24px oklch(0% 0 0 / 0.10), 0 1px 2px oklch(0% 0 0 / 0.08);
  background-color: var(--color-bg-lighter);
}

/* Shadows barely read against a dark background; use a hairline border instead. */
[data-theme="solunized-dark"] body > header,
[data-theme="solunized-black"] body > header {
  box-shadow: none;
  border: 1px solid color-mix(in oklch, var(--color-fg) 14%, transparent);
}

@media (max-width: 768px) {
  body {
    display: block;
    padding: 0;
    padding-block-end: var(--nav-height-mobile);
  }

  /* Mobile stays flush/edge-to-edge (native tab bar convention) regardless
     of theme, so the theme-scoped selectors are repeated here at equal
     specificity to override the desktop dark/black border rule above. */
  body > header,
  [data-theme="solunized-dark"] body > header,
  [data-theme="solunized-black"] body > header {
    position: fixed;
    inset-inline: 0;
    inset-block-start: auto;
    inset-block-end: 0;
    block-size: var(--nav-height-mobile);
    min-block-size: unset;
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-block-start: 1px solid var(--color-bg-darker);
    overflow: visible;
    z-index: var(--z-sticky);
  }
}

main > header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

main > header nav form button {
  --button-bg: var(--color-danger, red);
  --button-fg: var(--color-bg-lightest, white);
}
/*
 * Main
 * Main content area
 */

main {
  max-inline-size: var(--max-width-wide);
  margin-inline: auto;
  padding-inline: var(--inline-space-double);
  padding-block: var(--block-space);
  min-block-size: 70vh;
}

/* Desktop: right column in body grid */
@media (min-width: 769px) {
  main {
    grid-column: 2;
    grid-row: 1;
    max-inline-size: unset;
    margin-inline: 0;
    padding-block-start: 0;
  }
}

@media (max-width: 768px) {
  main {
    padding-inline: var(--inline-space);
  }
}
/*
 * Footer
 * Site footer
 */

footer {
  max-inline-size: var(--max-width-wide);
  margin-inline: auto;
  padding-inline: var(--inline-space-double);
  margin-block-start: var(--block-space-quad);
  padding-block-start: var(--block-space);
  border-block-start: 1px solid var(--color-bg-darker);
  color: var(--color-fg-lighter);
}

/* Desktop: right column, second row in body grid */
@media (min-width: 769px) {
  footer {
    grid-column: 2;
    grid-row: 2;
    max-inline-size: unset;
    margin-inline: 0;
  }
}

@media (max-width: 768px) {
  footer {
    padding-inline: var(--inline-space);
  }
}
/*
 * Tables
 * Semantic table styling
 */

table {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block: var(--block-space);
}

th,
td {
  padding: var(--block-space-half) var(--inline-space);
  text-align: start;
  border-block-end: 1px solid var(--color-bg-darker);
}

th {
  font-weight: 600;
  background-color: var(--color-bg-lighter);
  color: var(--color-fg-darkest);
}
/*
 * Forms
 * Classless form element styling
 */

form {
  max-inline-size: var(--max-width-content);
}

fieldset {
  border: 1px solid var(--color-bg-darker);
  border-radius: var(--radius);
  padding: var(--block-space);
  margin-block: var(--block-space);
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--inline-space-double);
  row-gap: var(--block-space-half);
  align-items: baseline;
}

legend {
  padding-inline: var(--inline-space-half);
  font-weight: 600;
  color: var(--color-fg-darker);
}

label {
  display: block;
  margin-block-end: var(--block-space-half);
  font-weight: 500;
  color: var(--color-fg-darker);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="time"],
textarea,
select {
  inline-size: 100%;
  padding-block: 0.5em;
  padding-inline: 0.75em;
  font-size: 1rem;
  font-family: inherit;
  line-height: var(--line-height-normal);
  background-color: var(--color-bg-lightest);
  color: var(--color-fg);
  border: 1px solid var(--color-bg-darker);
  border-radius: var(--radius);
  transition: border-color var(--transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
}

textarea {
  min-block-size: 8em;
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  inline-size: 1.125em;
  block-size: 1.125em;
  margin-inline-end: var(--inline-space-half);
  vertical-align: middle;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  --button-bg: var(--color-primary);
  --button-fg: var(--color-bg-lightest);

  display: inline-block;
  padding-block: 0.5em;
  padding-inline: 1.5em;
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  line-height: var(--line-height-normal);
  text-decoration: none;
  background-color: var(--button-bg);
  color: var(--button-fg);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: filter var(--transition-fast);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  filter: brightness(1.1);
}

button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active {
  filter: brightness(0.95);
}

button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

input:invalid,
textarea:invalid,
select:invalid {
  border-color: var(--color-danger);
}

small {
  display: block;
  margin-block-start: var(--block-space-half);
  color: var(--color-fg-lighter);
  font-size: var(--text-small);
}

form > * + * {
  margin-block-start: var(--block-space);
}

/* Side-by-side field layout: label left, control right */

/* legend spans both columns */
fieldset > legend {
  grid-column: 1 / -1;
}

/* Flat layout: label and inputs as direct fieldset children */
fieldset > label {
  grid-column: 1;
  margin-block-end: 0;
}

fieldset > input[type="text"],
fieldset > input[type="email"],
fieldset > input[type="password"],
fieldset > input[type="url"],
fieldset > input[type="tel"],
fieldset > input[type="number"],
fieldset > input[type="search"],
fieldset > input[type="date"],
fieldset > input[type="datetime-local"],
fieldset > input[type="month"],
fieldset > input[type="week"],
fieldset > input[type="time"],
fieldset > textarea,
fieldset > select {
  grid-column: 2;
}

/* In flat layout, small spans both columns so the next label starts on a new row */
fieldset > small {
  grid-column: 1 / -1;
  margin-block-start: 0;
}

/* Buttons align to the input column */
fieldset > button,
fieldset > input[type="submit"],
fieldset > input[type="button"],
fieldset > input[type="reset"] {
  grid-column: 2;
  justify-self: start;
}

@media (max-width: 768px) {
  fieldset {
    display: block;
  }

  fieldset > label {
    margin-block-end: var(--block-space-half);
  }
}
/*
 * Details/Summary
 * Disclosure widget styling
 */

details {
  margin-block: var(--block-space);
}

summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-fg-darker);
}

summary:hover {
  color: var(--color-fg-darkest);
}
/*
 * Flash Messages
 * Status and alert notifications using ARIA roles
 *
 * Fixed-position toast notifications stack inside a notifications container.
 */

[data-mvpa-flashes] {
  position: fixed;
  top: var(--block-space);
  right: var(--block-space);
  inline-size: min(400px, calc(100vw - 2 * var(--block-space)));
  z-index: var(--z-notification);
  display: grid;
  gap: var(--block-space-half);
}

[data-mvpa-flashes] > aside[role="status"],
[data-mvpa-flashes] > aside[role="alert"] {
  padding: var(--block-space);
  border: 0;
  border-radius: var(--radius);
  margin-block-end: 0;
}

[data-mvpa-flashes] > aside[role="status"] {
  background-color: var(--color-success);
  color: var(--color-bg-lightest);
}

[data-mvpa-flashes] > aside[role="alert"] {
  background-color: var(--color-danger);
  color: var(--color-bg-lightest);
}
/*
 * Error Messages
 * Form validation errors in aside elements
 */

aside[role="alert"] {
  padding: var(--block-space);
  background-color: oklch(from var(--color-danger) l c h / 0.1);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
  margin-block-end: var(--block-space);
  color: var(--color-fg);
}

aside[role="alert"] h2 {
  margin-block-start: 0;
  color: var(--color-danger);
}

aside[role="alert"] ul {
  margin-block-end: 0;
}
/*
 * Button Variants
 * Minimal classes for button color variants
 */

.button-success {
  --button-bg: var(--color-success);
}

.button-danger {
  --button-bg: var(--color-danger);
}

.button-warning {
  --button-bg: var(--color-warning);
}

.button-secondary {
  --button-bg: var(--color-bg-darker);
  --button-fg: var(--color-fg);
}
/*
 * Progress Bar
 * Native progress element styling
 */

progress {
  inline-size: 100%;
  block-size: 1.5em;
  border: none;
  border-radius: var(--radius);
  background-color: var(--color-bg-darker);
}

progress::-webkit-progress-bar {
  background-color: var(--color-bg-darker);
  border-radius: var(--radius);
}

progress::-webkit-progress-value {
  background-color: var(--color-primary);
  border-radius: var(--radius);
}

progress::-moz-progress-bar {
  background-color: var(--color-primary);
  border-radius: var(--radius);
}
/*
 * Definition Lists
 * Grid-based layout for dl/dt/dd
 */

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--block-space-half) var(--inline-space-double);
}

dt {
  font-weight: 600;
  color: var(--color-fg-darker);
}

dd {
  margin: 0;
}
/*
 * Article
 * Content block styling
 */

article {
  padding: var(--block-space);
  background-color: var(--color-bg-lighter);
  border: 1px solid var(--color-bg-darker);
  border-radius: var(--radius-large);
  margin-block-end: var(--block-space);
  box-shadow: 0 1px 3px oklch(0% 0 0 / 0.06);
}
/*
 * Mark/Highlight
 * Text highlighting
 */

mark {
  background-color: var(--color-yellow);
  padding-inline: 0.25em;
  border-radius: var(--radius-small);
}
/*
 * Navigation
 * App-style navigation tabs.
 * Desktop: vertical sidebar column. Mobile: horizontal bottom bar.
 */

/* Override base typography link styles for all nav links */
header nav a,
header nav a:hover,
header nav a:visited {
  text-decoration: none;
  color: var(--color-fg);
}

header nav {
  display: flex;
  flex-direction: column;
  padding: var(--block-space);
  gap: var(--block-space-half);
  min-block-size: 100%;
}

header nav h1,
header nav h2 {
  padding: var(--block-space-half) var(--inline-space);
  margin-block-end: var(--block-space);
  font-size: var(--text-medium);
  font-weight: 700;
}

header nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

header nav ul li > a,
header nav ul li > details > summary {
  display: flex;
  align-items: center;
  gap: var(--inline-space);
  padding: var(--block-space-half) var(--inline-space);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 500;
  color: var(--color-fg);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform 150ms ease-out, box-shadow 150ms ease-out;
  cursor: pointer;
}

header nav ul li > a:hover,
header nav ul li > details > summary:hover {
  background-color: color-mix(in oklch, var(--color-bg-lighter), var(--color-fg) 8%);
  color: var(--color-fg-darker);
  text-decoration: none;
  transform: scale(var(--animation-scale-small)) translateY(-2px);
  box-shadow: 0 3px 8px oklch(0% 0 0 / 0.14);
}

header nav ul li > a[aria-current="page"] {
  background-color: var(--color-primary);
  color: var(--color-bg);
}

/* Subnavigation <details> (overrides base details.css) */

header nav details {
  margin-block: 0;
}

header nav details > summary {
  list-style: none;
}

header nav details > summary::-webkit-details-marker {
  display: none;
}

header nav details > summary::after {
  content: "›";
  margin-inline-start: auto;
  font-size: var(--text-medium);
  line-height: 1;
  transition: transform var(--transition-fast);
}

header nav details[open] > summary::after {
  transform: rotate(90deg);
}

header nav details > ul {
  margin-block-start: 2px;
  margin-inline-start: var(--inline-space);
  padding-inline-start: var(--inline-space);
  border-inline-start: 2px solid var(--color-bg-darkest);
}

/* Mobile overrides */

@media (max-width: 768px) {
  header nav {
    flex-direction: row;
    padding: var(--block-space-half) var(--inline-space-half);
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    align-items: center;
    /* Scroll hint: edge fade appears only when overflow content exists.
       local = moves with content (covers the shadow at edge);
       scroll = fixed to element (the shadow itself). */
    background:
      linear-gradient(to right, var(--color-bg-lighter), transparent) left  / 3rem 100% no-repeat local,
      linear-gradient(to left,  var(--color-bg-lighter), transparent) right / 3rem 100% no-repeat local,
      linear-gradient(to right, var(--color-bg-lighter), transparent) left  / 3rem 100% no-repeat scroll,
      linear-gradient(to left,  var(--color-bg-lighter), transparent) right / 3rem 100% no-repeat scroll,
      var(--color-bg-lighter);
  }

  header nav::-webkit-scrollbar { display: none; }

  header nav h1,
  header nav h2 { display: none; }

  /* Top-level tab list: horizontal row */
  header nav > ul {
    flex-direction: row;
    gap: var(--inline-space-half);
    width: 100%;
  }

  header nav > ul > li {
    flex: 1;
    min-inline-size: max-content;
  }

  /* Tab bar items: squircle style */
  header nav > ul > li > a,
  header nav > ul > li > details > summary {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding-inline: var(--inline-space-half);
    border-radius: var(--radius-large);
    font-size: var(--text-x-small);
    block-size: calc(var(--nav-height-mobile) - var(--block-space));
    background-color: var(--color-bg);
  }

  /* Hide the chevron in the tab bar */
  header nav details > summary::after { display: none; }

  /* Popup panel: anchored above the bottom bar */
  header nav details > ul {
    position: fixed;
    inset-inline: 0;
    inset-block-start: auto;
    inset-block-end: var(--nav-height-mobile);
    margin: 0;
    padding: var(--block-space);
    background-color: var(--color-bg-lighter);
    border-block-start: 1px solid var(--color-bg-darker);
    border-inline-start: none;
    flex-direction: column;
    gap: var(--block-space-half);
    max-block-size: 50dvh;
    overflow-y: auto;
    z-index: var(--z-dropdown);
  }

  /* Popup links: restore normal nav link appearance */
  header nav details > ul li > a {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: var(--block-space-half) var(--inline-space);
    border-radius: var(--radius);
    font-size: var(--text-normal);
    block-size: auto;
  }
}
/*
 * Turbo Transitions & View Transitions API
 * Utilities for smooth page transitions and Turbo Stream animations
 */

@media (prefers-reduced-motion: no-preference) {
  /* =====================================================
     View Transitions API (Turbo Drive)
     ===================================================== */

  /* Enable View Transitions API for page navigation */
  @supports (view-transition-name: main) {
    @view-transition {
      navigation: auto;
    }

    /* Customize duration for view transitions */
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: 300ms;
    }

    /* Keep header fixed during page transitions */
    body > header {
      view-transition-name: header;
    }

    /* Keep footer fixed during page transitions */
    footer {
      view-transition-name: footer;
    }

    /* Allow shared element transitions with data attribute
     * Note: CSS attr() for view-transition-name is not widely supported.
     * Use inline styles instead: style="view-transition-name: unique-id;" */
    /* [data-turbo-transition-id] {
      view-transition-name: attr(data-turbo-transition-id type(<custom-ident>), none);
    } */

    /* Direction-aware main content slide. Direction ("forward"/"backward")
     * is computed by app/javascript/mvpa/page_transitions.js (based on
     * sidebar nav order) and passed to the next page via sessionStorage; a
     * synchronous inline script at the top of <head> (see README) reads it
     * and sets data-transition-direction on <html> before first paint.
     *
     * This deliberately does NOT use the View Transitions types API +
     * named-type pseudo-class mechanism — confirmed during design validation
     * (a full-page color-flash test) to not actually take effect in
     * real-world testing despite every individual piece of that API
     * reporting/behaving as supported. A plain data-attribute is used
     * instead, since the named-type pseudo-class with a matching
     * pseudo-element scope is what silently failed to work in testing.
     *
     * The rules below are an unconditional baseline (not feature-detected)
     * so pages reached outside the sidebar nav, or any browser where the
     * data-attribute never gets set, still get a plain slide instead of
     * nothing. Task 3 adds direction-scoped overrides on top of this via
     * ordinary CSS specificity. */
    main {
      view-transition-name: main-content;
    }

    ::view-transition-old(main-content) {
      animation-name: mvpa-slide-out-down;
    }

    ::view-transition-new(main-content) {
      animation-name: mvpa-slide-in-down;
    }

    html[data-transition-direction="forward"] ::view-transition-old(main-content) {
      animation-name: mvpa-slide-out-down;
    }

    html[data-transition-direction="forward"] ::view-transition-new(main-content) {
      animation-name: mvpa-slide-in-down;
    }

    html[data-transition-direction="backward"] ::view-transition-old(main-content) {
      animation-name: mvpa-slide-out-up;
    }

    html[data-transition-direction="backward"] ::view-transition-new(main-content) {
      animation-name: mvpa-slide-in-up;
    }

    /* forward/down: old content exits toward the bottom, new content enters
     * from the top — both moving downward, one continuous motion. Uses
     * viewport-relative vh (not %, which is relative to main's own —
     * possibly short — box height and can leave content only partially
     * off-screen) so short pages still slide fully clear of the viewport. */
    @keyframes mvpa-slide-out-down {
      to {
        translate: 0 100vh;
      }
    }

    @keyframes mvpa-slide-in-down {
      from {
        translate: 0 -100vh;
      }
    }

    /* backward/up: the reverse — both moving upward */
    @keyframes mvpa-slide-out-up {
      to {
        translate: 0 -100vh;
      }
    }

    @keyframes mvpa-slide-in-up {
      from {
        translate: 0 100vh;
      }
    }

    /* Mobile: the sidebar collapses to a horizontal bottom tab bar at this
     * same breakpoint (see 2_modules/10_navigation.css), so swap the slide
     * axis to match — left/right instead of up/down. The direction-scoped
     * selector rules above don't need to change: they reference these same
     * keyframe names, which are simply redefined here for this viewport. */
    @media (max-width: 768px) {
      @keyframes mvpa-slide-out-down {
        to {
          translate: 100vw 0;
        }
      }

      @keyframes mvpa-slide-in-down {
        from {
          translate: -100vw 0;
        }
      }

      @keyframes mvpa-slide-out-up {
        to {
          translate: -100vw 0;
        }
      }

      @keyframes mvpa-slide-in-up {
        from {
          translate: 100vw 0;
        }
      }
    }
  }

  /* =====================================================
     Turbo Stream Animation Utilities
     ===================================================== */

  /* Utility classes for Stimulus controllers */
  .turbo-animating-in {
    animation: turbo-slide-in-right var(--animation-duration) var(--animation-spring);
  }

  .turbo-animating-in-top {
    animation: turbo-slide-in-top var(--animation-duration) var(--animation-spring);
  }

  .turbo-animating-in-bottom {
    animation: turbo-slide-in-bottom var(--animation-duration) var(--animation-spring);
  }

  .turbo-animating-out {
    animation: turbo-fade-out var(--animation-duration) ease-out forwards;
  }

  .turbo-highlight {
    animation: turbo-highlight-update 800ms ease-out;
  }

  /* =====================================================
     Turbo Frame Transitions
     ===================================================== */

  /* Fade in content when Turbo Frame loads */
  turbo-frame {
    animation: turbo-slide-in-bottom var(--animation-duration-slow) var(--animation-ease-out);
  }

  /* Note: Turbo Stream animations should use data attributes on the target elements
   * (e.g., data-turbo-stream-transition="slide-in") rather than selectors on
   * <turbo-stream> elements, as the content is moved to the target element. */

  /* =====================================================
     Loading States
     ===================================================== */

  /* Skeleton loading animation */
  .skeleton {
    background: linear-gradient(
      90deg,
      var(--color-bg-lighter) 25%,
      var(--color-bg) 50%,
      var(--color-bg-lighter) 75%
    );
    background-size: 200% 100%;
    animation: progress-shimmer 1.5s ease-in-out infinite;
  }
}
/*
 * Solunized color definitions.
 *
 * Uses prefers-color-scheme for automatic light/dark switching.
 * User can override with data-theme attribute.
 */

/* ============================================
   Default themes
   ============================================ */

/* Solunized Light - default light theme */
:root {
  --color-bg-0: oklch(97.94% 0.0045 214.33);
  --color-bg-1: oklch(93.79% 0.0095 222.06);
  --color-bg-2: oklch(86.24% 0.0187 218.40);

  --color-dim-0: oklch(67.43% 0.0369 212.49);
  --color-fg-0: oklch(46.67% 0.0340 215.53);
  --color-fg-1: oklch(38.01% 0.0361 220.97);

  --color-red: oklch(53.03% 0.1989 26.57);
  --color-green: oklch(55.37% 0.1666 136.63);
  --color-yellow: oklch(60.21% 0.1230 89.36);
  --color-blue: oklch(52.41% 0.1709 254.71);
  --color-magenta: oklch(57.08% 0.1799 344.66);
  --color-cyan: oklch(56.45% 0.0984 187.55);
  --color-orange: oklch(54.51% 0.1416 46.63);
  --color-violet: oklch(55.00% 0.1524 294.56);

  /* bg scale: bg_0=lightest surface (sidebar/card), bg_1=canvas (recessed page background), bg_2=darkest border */
  --color-bg: var(--color-bg-1);
  --color-bg-lighter: var(--color-bg-0);
  --color-bg-lightest: var(--color-bg-0);
  --color-bg-darker: var(--color-bg-1);
  --color-bg-darkest: var(--color-bg-2);

  /* fg scale: fg_1=darkest/most prominent, fg_0=normal, dim_0=subdued */
  --color-fg-darkest: var(--color-fg-1);
  --color-fg-darker: var(--color-fg-1);
  --color-fg: var(--color-fg-0);
  --color-fg-lighter: var(--color-dim-0);
  --color-fg-lightest: var(--color-dim-0);
}

/* Solunized Dark - default dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-0: oklch(26.88% 0.0496 224.07);
    --color-bg-1: oklch(32.96% 0.0544 224.30);
    --color-bg-2: oklch(45.08% 0.0609 222.56);

    --color-dim-0: oklch(61.07% 0.0521 212.77);
    --color-fg-0: oklch(77.81% 0.0389 211.14);
    --color-fg-1: oklch(84.36% 0.0277 211.07);

    --color-red: oklch(66.97% 0.1980 26.40);
    --color-green: oklch(71.36% 0.1764 133.57);
    --color-yellow: oklch(77.28% 0.1470 90.32);
    --color-blue: oklch(65.55% 0.1672 255.40);
    --color-magenta: oklch(72.18% 0.1745 346.53);
    --color-cyan: oklch(74.59% 0.1149 184.95);
    --color-orange: oklch(71.22% 0.1467 48.92);
    --color-violet: oklch(69.35% 0.1458 300.84);

    /* bg scale: bg_0=darkest, bg_1=lighter panel, bg_2=lightest border */
    --color-bg: var(--color-bg-0);
    --color-bg-lighter: var(--color-bg-1);
    --color-bg-lightest: var(--color-bg-2);
    --color-bg-darker: var(--color-bg-0);
    --color-bg-darkest: var(--color-bg-0);

    /* fg scale: fg_1=brightest, fg_0=normal, dim_0=subdued */
    --color-fg-darkest: var(--color-fg-1);
    --color-fg-darker: var(--color-fg-1);
    --color-fg: var(--color-fg-0);
    --color-fg-lighter: var(--color-dim-0);
    --color-fg-lightest: var(--color-dim-0);
  }
}

/* ============================================
   Solunized themes — generated by kyiv
   ============================================ */

/* Solunized Light */
/* Generated by kyiv — do not edit directly */

[data-theme="solunized-light"] {
  --color-bg-0: oklch(97.94% 0.0045 214.33);
  --color-bg-1: oklch(93.79% 0.0095 222.06);
  --color-bg-2: oklch(86.24% 0.0187 218.40);

  --color-dim-0: oklch(67.43% 0.0369 212.49);
  --color-fg-0: oklch(46.67% 0.0340 215.53);
  --color-fg-1: oklch(38.01% 0.0361 220.97);

  --color-red: oklch(53.03% 0.1989 26.57);
  --color-green: oklch(55.37% 0.1666 136.63);
  --color-yellow: oklch(60.21% 0.1230 89.36);
  --color-blue: oklch(52.41% 0.1709 254.71);
  --color-magenta: oklch(57.08% 0.1799 344.66);
  --color-cyan: oklch(56.45% 0.0984 187.55);
  --color-orange: oklch(54.51% 0.1416 46.63);
  --color-violet: oklch(55.00% 0.1524 294.56);

  --color-br-red: oklch(50.26% 0.1905 26.76);
  --color-br-green: oklch(51.77% 0.1558 136.62);
  --color-br-yellow: oklch(56.86% 0.1162 88.42);
  --color-br-blue: oklch(49.75% 0.1700 256.02);
  --color-br-magenta: oklch(54.28% 0.1769 345.31);
  --color-br-cyan: oklch(53.13% 0.0924 187.95);
  --color-br-orange: oklch(51.56% 0.1359 46.54);
  --color-br-violet: oklch(51.69% 0.1507 293.47);
}

/* Solunized Dark */
/* Generated by kyiv — do not edit directly */

[data-theme="solunized-dark"] {
  --color-bg-0: oklch(26.88% 0.0496 224.07);
  --color-bg-1: oklch(32.96% 0.0544 224.30);
  --color-bg-2: oklch(45.08% 0.0609 222.56);

  --color-dim-0: oklch(61.07% 0.0521 212.77);
  --color-fg-0: oklch(77.81% 0.0389 211.14);
  --color-fg-1: oklch(84.36% 0.0277 211.07);

  --color-red: oklch(66.97% 0.1980 26.40);
  --color-green: oklch(71.36% 0.1764 133.57);
  --color-yellow: oklch(77.28% 0.1470 90.32);
  --color-blue: oklch(65.55% 0.1672 255.40);
  --color-magenta: oklch(72.18% 0.1745 346.53);
  --color-cyan: oklch(74.59% 0.1149 184.95);
  --color-orange: oklch(71.22% 0.1467 48.92);
  --color-violet: oklch(69.35% 0.1458 300.84);

  --color-br-red: oklch(70.84% 0.1838 26.63);
  --color-br-green: oklch(75.70% 0.1767 133.28);
  --color-br-yellow: oklch(81.66% 0.1498 90.42);
  --color-br-blue: oklch(69.99% 0.1547 255.01);
  --color-br-magenta: oklch(76.50% 0.1725 344.74);
  --color-br-cyan: oklch(79.39% 0.1164 183.93);
  --color-br-orange: oklch(75.86% 0.1478 50.17);
  --color-br-violet: oklch(73.83% 0.1454 300.88);
}

/* Solunized White */
/* Generated by kyiv — do not edit directly */

[data-theme="solunized-white"] {
  --color-bg-0: oklch(100.00% 0.0000 89.88);
  --color-bg-1: oklch(95.64% 0.0079 216.62);
  --color-bg-2: oklch(88.44% 0.0171 215.47);

  --color-dim-0: oklch(62.06% 0.0398 213.74);
  --color-fg-0: oklch(40.99% 0.0342 219.00);
  --color-fg-1: oklch(32.00% 0.0357 222.34);

  --color-red: oklch(53.03% 0.1989 26.57);
  --color-green: oklch(55.37% 0.1666 136.63);
  --color-yellow: oklch(60.21% 0.1230 89.36);
  --color-blue: oklch(52.41% 0.1709 254.71);
  --color-magenta: oklch(57.08% 0.1799 344.66);
  --color-cyan: oklch(56.45% 0.0984 187.55);
  --color-orange: oklch(54.51% 0.1416 46.63);
  --color-violet: oklch(55.00% 0.1524 294.56);

  --color-br-red: oklch(50.26% 0.1905 26.76);
  --color-br-green: oklch(51.77% 0.1558 136.62);
  --color-br-yellow: oklch(56.86% 0.1162 88.42);
  --color-br-blue: oklch(49.75% 0.1700 256.02);
  --color-br-magenta: oklch(54.28% 0.1769 345.31);
  --color-br-cyan: oklch(53.13% 0.0924 187.95);
  --color-br-orange: oklch(51.56% 0.1359 46.54);
  --color-br-violet: oklch(51.69% 0.1507 293.47);
}

/* Solunized Black */
/* Generated by kyiv — do not edit directly */

[data-theme="solunized-black"] {
  --color-bg-0: oklch(17.51% 0.0128 214.90);
  --color-bg-1: oklch(24.01% 0.0251 239.36);
  --color-bg-2: oklch(33.43% 0.0301 223.81);

  --color-dim-0: oklch(53.38% 0.0338 217.86);
  --color-fg-0: oklch(75.72% 0.0318 212.09);
  --color-fg-1: oklch(83.37% 0.0234 210.40);

  --color-red: oklch(66.97% 0.1980 26.40);
  --color-green: oklch(71.36% 0.1764 133.57);
  --color-yellow: oklch(77.28% 0.1470 90.32);
  --color-blue: oklch(65.55% 0.1672 255.40);
  --color-magenta: oklch(72.18% 0.1745 346.53);
  --color-cyan: oklch(74.59% 0.1149 184.95);
  --color-orange: oklch(71.22% 0.1467 48.92);
  --color-violet: oklch(69.35% 0.1458 300.84);

  --color-br-red: oklch(70.84% 0.1838 26.63);
  --color-br-green: oklch(75.70% 0.1767 133.28);
  --color-br-yellow: oklch(81.66% 0.1498 90.42);
  --color-br-blue: oklch(69.99% 0.1547 255.01);
  --color-br-magenta: oklch(76.50% 0.1725 344.74);
  --color-br-cyan: oklch(79.39% 0.1164 183.93);
  --color-br-orange: oklch(75.86% 0.1478 50.17);
  --color-br-violet: oklch(73.83% 0.1454 300.88);
}

/* Map Solunized palette to mvpa.css scale variables */

[data-theme="solunized-dark"],
[data-theme="solunized-black"] {
  --color-bg: var(--color-bg-0);
  --color-bg-lighter: var(--color-bg-1);
  --color-bg-lightest: var(--color-bg-2);
  --color-bg-darker: var(--color-bg-0);
  --color-bg-darkest: var(--color-bg-0);

  --color-fg-darkest: var(--color-fg-1);
  --color-fg-darker: var(--color-fg-1);
  --color-fg: var(--color-fg-0);
  --color-fg-lighter: var(--color-dim-0);
  --color-fg-lightest: var(--color-dim-0);
}

[data-theme="solunized-light"],
[data-theme="solunized-white"] {
  --color-bg: var(--color-bg-1);
  --color-bg-lighter: var(--color-bg-0);
  --color-bg-lightest: var(--color-bg-0);
  --color-bg-darker: var(--color-bg-1);
  --color-bg-darkest: var(--color-bg-2);

  --color-fg-darkest: var(--color-fg-1);
  --color-fg-darker: var(--color-fg-1);
  --color-fg: var(--color-fg-0);
  --color-fg-lighter: var(--color-dim-0);
  --color-fg-lightest: var(--color-dim-0);
}

/* Semantic color mappings */

:root {
  --color-primary: var(--color-blue);
  --color-success: var(--color-green);
  --color-danger: var(--color-red);
  --color-warning: var(--color-yellow);
  --color-info: var(--color-cyan);
}
/*
 * Theme Switching Logic
 * Listens to user preferences and system color scheme
 */

/*
 * Theme application priority:
 * 1. User's explicit light/dark theme choice
 * 2. User's color scheme preference (system/light/dark)
 * 3. System preference (prefers-color-scheme)
 * 4. Default to Solunized Light
 */

/* Apply light theme by default */
html {
  color-scheme: light;
}

/* Apply dark theme when system prefers dark */
@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

/* User explicitly chose light mode */
html[data-color-scheme="light"] {
  color-scheme: light;
}

/* User explicitly chose dark mode */
html[data-color-scheme="dark"] {
  color-scheme: dark;
}

/* System preference respected (no explicit user choice) */
html[data-color-scheme="system"] {
  color-scheme: light dark;
}

/*
 * Theme attributes set via JavaScript based on user model:
 * - data-color-scheme: "system" | "light" | "dark"
 * - light-theme: "solunized-light" | "solunized-white"
 * - dark-theme: "solunized-dark" | "solunized-black"
 */
/*
 * Monochrome Device Theme
 * Matches devices that can only render shades of gray (e-ink, etc.).
 * Assumes 8 grey levels (3 bits per pixel) — typical for e-ink displays.
 *
 * Strategy: set chroma C=0 in OKLCH while preserving lightness L.
 * This converts each chromatic color to its perceptual grayscale equivalent.
 *
 * Background/foreground variables (--color-bg-*, --color-fg-*, --color-dim-0)
 * already have near-zero chroma and require no override.
 *
 * Note: in light mode the chromatic lightness values cluster in a narrow range
 * (52–60%), which limits distinguishability at 8 grey levels. This is a palette
 * constraint, not a bug.
 */

@media (monochrome) {
  /* Default light theme (:root without data-theme) */
  :root {
    --color-red: oklch(53.03% 0 0);
    --color-green: oklch(55.37% 0 0);
    --color-yellow: oklch(60.21% 0 0);
    --color-blue: oklch(52.41% 0 0);
    --color-magenta: oklch(57.08% 0 0);
    --color-cyan: oklch(56.45% 0 0);
    --color-orange: oklch(54.51% 0 0);
    --color-violet: oklch(55.00% 0 0);
  }

  /* Default dark theme (system prefers dark) */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-red: oklch(66.97% 0 0);
      --color-green: oklch(71.36% 0 0);
      --color-yellow: oklch(77.28% 0 0);
      --color-blue: oklch(65.55% 0 0);
      --color-magenta: oklch(72.18% 0 0);
      --color-cyan: oklch(74.59% 0 0);
      --color-orange: oklch(71.22% 0 0);
      --color-violet: oklch(69.35% 0 0);
    }
  }

  /* Explicit light themes */
  [data-theme="solunized-light"],
  [data-theme="solunized-white"] {
    --color-red: oklch(53.03% 0 0);
    --color-green: oklch(55.37% 0 0);
    --color-yellow: oklch(60.21% 0 0);
    --color-blue: oklch(52.41% 0 0);
    --color-magenta: oklch(57.08% 0 0);
    --color-cyan: oklch(56.45% 0 0);
    --color-orange: oklch(54.51% 0 0);
    --color-violet: oklch(55.00% 0 0);

    --color-br-red: oklch(50.26% 0 0);
    --color-br-green: oklch(51.77% 0 0);
    --color-br-yellow: oklch(56.86% 0 0);
    --color-br-blue: oklch(49.75% 0 0);
    --color-br-magenta: oklch(54.28% 0 0);
    --color-br-cyan: oklch(53.13% 0 0);
    --color-br-orange: oklch(51.56% 0 0);
    --color-br-violet: oklch(51.69% 0 0);
  }

  /* Explicit dark themes */
  [data-theme="solunized-dark"],
  [data-theme="solunized-black"] {
    --color-red: oklch(66.97% 0 0);
    --color-green: oklch(71.36% 0 0);
    --color-yellow: oklch(77.28% 0 0);
    --color-blue: oklch(65.55% 0 0);
    --color-magenta: oklch(72.18% 0 0);
    --color-cyan: oklch(74.59% 0 0);
    --color-orange: oklch(71.22% 0 0);
    --color-violet: oklch(69.35% 0 0);

    --color-br-red: oklch(70.84% 0 0);
    --color-br-green: oklch(75.70% 0 0);
    --color-br-yellow: oklch(81.66% 0 0);
    --color-br-blue: oklch(69.99% 0 0);
    --color-br-magenta: oklch(76.50% 0 0);
    --color-br-cyan: oklch(79.39% 0 0);
    --color-br-orange: oklch(75.86% 0 0);
    --color-br-violet: oklch(73.83% 0 0);
  }
}