:root {
  /*** gray ***/
  --uchu-gray-1-raw: 95.57% 0.003 286.35;
  --uchu-gray-1: oklch(var(--uchu-gray-1-raw));
  --uchu-gray-2-raw: 92.04% 0.002 197.12;
  --uchu-gray-2: oklch(var(--uchu-gray-2-raw));
  --uchu-gray-3-raw: 88.28% 0.003 286.34;
  --uchu-gray-3: oklch(var(--uchu-gray-3-raw));
  --uchu-gray-4-raw: 84.68% 0.002 197.12;
  --uchu-gray-4: oklch(var(--uchu-gray-4-raw));
  --uchu-gray-5-raw: 80.73% 0.002 247.84;
  --uchu-gray-5: oklch(var(--uchu-gray-5-raw));
  --uchu-gray-6-raw: 75.03% 0.002 247.85;
  --uchu-gray-6: oklch(var(--uchu-gray-6-raw));
  --uchu-gray-7-raw: 69.01% 0.003 286.32;
  --uchu-gray-7: oklch(var(--uchu-gray-7-raw));
  --uchu-gray-8-raw: 63.12% 0.004 219.55;
  --uchu-gray-8: oklch(var(--uchu-gray-8-raw));
  --uchu-gray-9-raw: 56.82% 0.004 247.89;
  --uchu-gray-9: oklch(var(--uchu-gray-9-raw));

  /*** red ***/
  --uchu-red-1-raw: 88.98% 0.052 3.28;
  --uchu-red-1: oklch(var(--uchu-red-1-raw));
  --uchu-red-2-raw: 78.78% 0.109 4.54;
  --uchu-red-2: oklch(var(--uchu-red-2-raw));
  --uchu-red-3-raw: 69.86% 0.162 7.82;
  --uchu-red-3: oklch(var(--uchu-red-3-raw));
  --uchu-red-4-raw: 62.73% 0.209 12.37;
  --uchu-red-4: oklch(var(--uchu-red-4-raw));
  --uchu-red-5-raw: 58.63% 0.231 19.6;
  --uchu-red-5: oklch(var(--uchu-red-5-raw));
  --uchu-red-6-raw: 54.41% 0.214 19.06;
  --uchu-red-6: oklch(var(--uchu-red-6-raw));
  --uchu-red-7-raw: 49.95% 0.195 18.34;
  --uchu-red-7: oklch(var(--uchu-red-7-raw));
  --uchu-red-8-raw: 45.8% 0.177 17.7;
  --uchu-red-8: oklch(var(--uchu-red-8-raw));
  --uchu-red-9-raw: 41.17% 0.157 16.58;
  --uchu-red-9: oklch(var(--uchu-red-9-raw));

  /*** pink ***/
  --uchu-pink-1-raw: 95.8% 0.023 354.27;
  --uchu-pink-1: oklch(var(--uchu-pink-1-raw));
  --uchu-pink-2-raw: 92.14% 0.046 352.31;
  --uchu-pink-2: oklch(var(--uchu-pink-2-raw));
  --uchu-pink-3-raw: 88.9% 0.066 354.39;
  --uchu-pink-3: oklch(var(--uchu-pink-3-raw));
  --uchu-pink-4-raw: 85.43% 0.09 354.1;
  --uchu-pink-4: oklch(var(--uchu-pink-4-raw));
  --uchu-pink-5-raw: 82.23% 0.112 355.33;
  --uchu-pink-5: oklch(var(--uchu-pink-5-raw));
  --uchu-pink-6-raw: 76.37% 0.101 355.37;
  --uchu-pink-6: oklch(var(--uchu-pink-6-raw));
  --uchu-pink-7-raw: 70.23% 0.092 354.96;
  --uchu-pink-7: oklch(var(--uchu-pink-7-raw));
  --uchu-pink-8-raw: 64.11% 0.084 353.91;
  --uchu-pink-8: oklch(var(--uchu-pink-8-raw));
  --uchu-pink-9-raw: 57.68% 0.074 353.14;
  --uchu-pink-9: oklch(var(--uchu-pink-9-raw));

  /*** purple ***/
  --uchu-purple-1-raw: 89.1% 0.046 305.24;
  --uchu-purple-1: oklch(var(--uchu-purple-1-raw));
  --uchu-purple-2-raw: 78.68% 0.091 305;
  --uchu-purple-2: oklch(var(--uchu-purple-2-raw));
  --uchu-purple-3-raw: 68.5% 0.136 303.78;
  --uchu-purple-3: oklch(var(--uchu-purple-3-raw));
  --uchu-purple-4-raw: 58.47% 0.181 302.06;
  --uchu-purple-4: oklch(var(--uchu-purple-4-raw));
  --uchu-purple-5-raw: 49.39% 0.215 298.31;
  --uchu-purple-5: oklch(var(--uchu-purple-5-raw));
  --uchu-purple-6-raw: 46.11% 0.198 298.4;
  --uchu-purple-6: oklch(var(--uchu-purple-6-raw));
  --uchu-purple-7-raw: 42.77% 0.181 298.49;
  --uchu-purple-7: oklch(var(--uchu-purple-7-raw));
  --uchu-purple-8-raw: 39.46% 0.164 298.29;
  --uchu-purple-8: oklch(var(--uchu-purple-8-raw));
  --uchu-purple-9-raw: 36.01% 0.145 298.35;
  --uchu-purple-9: oklch(var(--uchu-purple-9-raw));

  /*** blue ***/
  --uchu-blue-1-raw: 89.66% 0.046 260.67;
  --uchu-blue-1: oklch(var(--uchu-blue-1-raw));
  --uchu-blue-2-raw: 80.17% 0.091 258.88;
  --uchu-blue-2: oklch(var(--uchu-blue-2-raw));
  --uchu-blue-3-raw: 70.94% 0.136 258.06;
  --uchu-blue-3: oklch(var(--uchu-blue-3-raw));
  --uchu-blue-4-raw: 62.39% 0.181 258.33;
  --uchu-blue-4: oklch(var(--uchu-blue-4-raw));
  --uchu-blue-5-raw: 54.87% 0.222 260.33;
  --uchu-blue-5: oklch(var(--uchu-blue-5-raw));
  --uchu-blue-6-raw: 51.15% 0.204 260.17;
  --uchu-blue-6: oklch(var(--uchu-blue-6-raw));
  --uchu-blue-7-raw: 47.36% 0.185 259.89;
  --uchu-blue-7: oklch(var(--uchu-blue-7-raw));
  --uchu-blue-8-raw: 43.48% 0.17 260.2;
  --uchu-blue-8: oklch(var(--uchu-blue-8-raw));
  --uchu-blue-9-raw: 39.53% 0.15 259.87;
  --uchu-blue-9: oklch(var(--uchu-blue-9-raw));

  /*** green ***/
  --uchu-green-1-raw: 93.96% 0.05 148.74;
  --uchu-green-1: oklch(var(--uchu-green-1-raw));
  --uchu-green-2-raw: 88.77% 0.096 147.71;
  --uchu-green-2: oklch(var(--uchu-green-2-raw));
  --uchu-green-3-raw: 83.74% 0.139 146.57;
  --uchu-green-3: oklch(var(--uchu-green-3-raw));
  --uchu-green-4-raw: 79.33% 0.179 145.62;
  --uchu-green-4: oklch(var(--uchu-green-4-raw));
  --uchu-green-5-raw: 75.23% 0.209 144.64;
  --uchu-green-5: oklch(var(--uchu-green-5-raw));
  --uchu-green-6-raw: 70.03% 0.194 144.71;
  --uchu-green-6: oklch(var(--uchu-green-6-raw));
  --uchu-green-7-raw: 64.24% 0.175 144.92;
  --uchu-green-7: oklch(var(--uchu-green-7-raw));
  --uchu-green-8-raw: 58.83% 0.158 145.05;
  --uchu-green-8: oklch(var(--uchu-green-8-raw));
  --uchu-green-9-raw: 52.77% 0.138 145.41;
  --uchu-green-9: oklch(var(--uchu-green-9-raw));

  /*** yellow ***/
  --uchu-yellow-1-raw: 97.05% 0.039 91.2;
  --uchu-yellow-1: oklch(var(--uchu-yellow-1-raw));
  --uchu-yellow-2-raw: 95% 0.07 92.39;
  --uchu-yellow-2: oklch(var(--uchu-yellow-2-raw));
  --uchu-yellow-3-raw: 92.76% 0.098 92.58;
  --uchu-yellow-3: oklch(var(--uchu-yellow-3-raw));
  --uchu-yellow-4-raw: 90.92% 0.125 92.56;
  --uchu-yellow-4: oklch(var(--uchu-yellow-4-raw));
  --uchu-yellow-5-raw: 89% 0.146 91.5;
  --uchu-yellow-5: oklch(var(--uchu-yellow-5-raw));
  --uchu-yellow-6-raw: 82.39% 0.133 91.5;
  --uchu-yellow-6: oklch(var(--uchu-yellow-6-raw));
  --uchu-yellow-7-raw: 75.84% 0.122 92.21;
  --uchu-yellow-7: oklch(var(--uchu-yellow-7-raw));
  --uchu-yellow-8-raw: 69.14% 0.109 91.04;
  --uchu-yellow-8: oklch(var(--uchu-yellow-8-raw));
  --uchu-yellow-9-raw: 62.29% 0.097 91.9;
  --uchu-yellow-9: oklch(var(--uchu-yellow-9-raw));

  /*** orange ***/
  --uchu-orange-1-raw: 93.83% 0.037 56.93;
  --uchu-orange-1: oklch(var(--uchu-orange-1-raw));
  --uchu-orange-2-raw: 88.37% 0.07258208750520016 55.80328658240742;
  --uchu-orange-2: oklch(var(--uchu-orange-2-raw));
  --uchu-orange-3-raw: 83.56% 0.10753627570574478 56.492594564236946;
  --uchu-orange-3: oklch(var(--uchu-orange-3-raw));
  --uchu-orange-4-raw: 78.75% 0.14163582809066333 54.32911089172009;
  --uchu-orange-4: oklch(var(--uchu-orange-4-raw));
  --uchu-orange-5-raw: 74.61% 0.171 51.56;
  --uchu-orange-5: oklch(var(--uchu-orange-5-raw));
  --uchu-orange-6-raw: 69.33% 0.157 52.18;
  --uchu-orange-6: oklch(var(--uchu-orange-6-raw));
  --uchu-orange-7-raw: 63.8% 0.142 52.1;
  --uchu-orange-7: oklch(var(--uchu-orange-7-raw));
  --uchu-orange-8-raw: 58.28% 0.128 52.2;
  --uchu-orange-8: oklch(var(--uchu-orange-8-raw));
  --uchu-orange-9-raw: 52.49% 0.113 51.98;
  --uchu-orange-9: oklch(var(--uchu-orange-9-raw));

  /*** general ***/
  --uchu-yin-1-raw: 91.87% 0.003 264.54;
  --uchu-yin-1: oklch(var(--uchu-yin-1-raw));
  --uchu-yin-2-raw: 84.61% 0.004 286.31;
  --uchu-yin-2: oklch(var(--uchu-yin-2-raw));
  --uchu-yin-3-raw: 76.89% 0.004 247.87;
  --uchu-yin-3: oklch(var(--uchu-yin-3-raw));
  --uchu-yin-4-raw: 69.17% 0.004 247.88;
  --uchu-yin-4: oklch(var(--uchu-yin-4-raw));
  --uchu-yin-5-raw: 61.01% 0.005 271.34;
  --uchu-yin-5: oklch(var(--uchu-yin-5-raw));
  --uchu-yin-6-raw: 52.79% 0.005 271.32;
  --uchu-yin-6: oklch(var(--uchu-yin-6-raw));
  --uchu-yin-7-raw: 43.87% 0.005 271.3;
  --uchu-yin-7: oklch(var(--uchu-yin-7-raw));
  --uchu-yin-8-raw: 35.02% 0.005 236.66;
  --uchu-yin-8: oklch(var(--uchu-yin-8-raw));
  --uchu-yin-9-raw: 25.11% 0.006 258.36;
  --uchu-yin-9: oklch(var(--uchu-yin-9-raw));
  --uchu-yin-raw: 14.38% 0.007 256.88;
  --uchu-yin: oklch(var(--uchu-yin-raw));
  --uchu-yang-raw: 99.4% 0 0;
  --uchu-yang: oklch(var(--uchu-yang-raw));
}
@layer reset, theme, base, layout, components, utilities;

/*──────────────────────────────────────────────────────────────────────────
  1. RESET LAYER
──────────────────────────────────────────────────────────────────────────*/
@layer reset {
  *, *::before, *::after {
  box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      interpolate-size: allow-keywords;
    }
  }

  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

  input, button, textarea, select {
    font: inherit;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }

  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }
}

/*──────────────────────────────────────────────────────────────────────────
  2. THEME LAYER
──────────────────────────────────────────────────────────────────────────*/
@layer theme {
  /*──────────*/
  /* Fonts    */
  /*──────────*/
  @font-face {
    font-family: "Geist";
    src: url("/fonts/Geist[wght].woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "GeistMono";
    src: url("/fonts/GeistMono[wght].woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }

  /*──────────────────*/
  /* Colors & Spacing */
  /*──────────────────*/
  :root {
    /* Color tokens (mapped to Uchu palette) */
    --color-black:        var(--uchu-yin);
    --color-white:        var(--uchu-yang);
    --color-contrast:     var(--color-black);
    --color-text:         var(--uchu-yin-7);
    --color-text-muted:   var(--uchu-yin-6);
    --color-accent:       var(--uchu-yellow-5);
    --color-accent-raw:   var(--uchu-yellow-5-raw);
    --color-link:         var(--color-accent);
    --color-border:       var(--uchu-yin-3);
    --color-background:   var(--uchu-yang);

    /* Spacing tokens */
    --spacing-xxs:  4px;
    --spacing-xs:   8px;
    --spacing-sm:   12px;
    --spacing-md:   16px;
    --spacing-lg:   24px;
    --spacing-xl:   32px;
    --spacing-xxl:  48px;
  }

  /*──────────────*/
  /* Dark mode    */
  /*──────────────*/
  @media (prefers-color-scheme: dark) {
    :root {
      --color-contrast:     var(--color-white);
      --color-text:         var(--uchu-yin-3);
      --color-text-muted:   var(--uchu-yin-5);
      --color-accent:       var(--uchu-yellow-5);
      --color-accent-raw:   var(--uchu-yellow-5-raw);
      --color-link:         var(--color-accent);
      --color-border:       var(--uchu-yin-6);
      --color-background:   var(--color-black);
    }
  }
}

/*──────────────────────────────────────────────────────────────────────────
  3. BASE LAYER
──────────────────────────────────────────────────────────────────────────*/
@layer base {
  /*────────────*/
  /* Typography */
  /*────────────*/
  html {
    font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--color-background);
    color: var(--color-text);
  }
  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }
  ::selection {
    /* add alpha of < 1 so safari does not interfere with the background-color */
    background-color: oklch(var(--color-accent-raw) / 0.95);
    color: var(--color-black);
  }
  mark {
    background-color: var(--color-accent);
    color: var(--color-black);
  }
  hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-block: var(--spacing-lg);
    width: var(--spacing-lg);
  }
  strong {
    font-weight: 500;
    color: var(--color-contrast);
  }
  em {
    font-style: italic;
  }

  /*──────────*/
  /* Headings */
  /*──────────*/
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    margin-block-start: var(--spacing-lg);
    margin-block-end: var(--spacing-md);
    font-weight: 600;
    color: var(--color-contrast);
  }
  h1 {
    border-inline-start: 4px solid var(--color-accent);
    padding-inline-start: var(--spacing-sm);
    margin-inline-start: calc(var(--spacing-md) * -1);
    margin-block-start: var(--spacing-xxl);
  }
  h2 {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--color-border);
    -webkit-text-decoration-color: var(--color-border);
    text-decoration-thickness: 1.5px;
    -webkit-text-decoration-thickness: 1.5px;
    text-underline-position: from-font;
    margin-block-start: var(--spacing-xl);
  }

  /*────────────────────*/
  /* Paragraphs & Links */
  /*────────────────────*/
  p:not(:is(li, blockquote, details, figure) p) {
    margin-block-start: var(--spacing-sm);
    margin-block-end: var(--spacing-md);
  }
  a:where(:link, :visited) {
    color: var(--color-contrast);
    text-decoration: inherit;
    -webkit-text-decoration: inherit;
    box-shadow: 0 1.5px 0 var(--color-link);
    transition: box-shadow 0.2s ease-in-out;
    will-change: transform;
  }
  @media (prefers-reduced-motion: reduce) {
    a:where(:link, :visited) {
      transition: none;
    }
  }
  a:where(:hover, :focus):not(:is(h1, h2, h3, h4, h5, h6) *) {
    box-shadow: 0 3px 0 var(--color-link);
  }
  a:focus-visible {
    outline-color: var(--color-link);
    outline-offset: var(--spacing-xxs);
    outline-style: dashed;
    outline-width: 2px;
  }
  :is(h1, h2, h3, h4, h5, h6) a {
    box-shadow: none;
  }

  /*───────*/
  /* Lists */
  /*───────*/
  ol, ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-inline-start: 1rem;
  }
  ul, ol {
    margin-block-start: var(--spacing-sm);
    margin-block-end: var(--spacing-md);
  }
  ul ul, ul ol, ol ul, ol ol {
    margin-block-end: 0;
  }
  ul li::marker{
    color: inherit;
    content: "⁕ ";
  }
  :is(ol, ul) li:is(:hover, :focus-within)::marker {
    color: var(--color-link);
  }
  /* Safari supports selector(::marker) but ignores content on it. */
  /* So we hide the native marker and inject our own via ::before */
  @supports (hanging-punctuation: first)
    and (font: -apple-system-body)
    and (-webkit-appearance: none) {
    ul {
      list-style: none;
      padding-inline-start: 1rem;
    }
    ul li {
      position: relative;
    }
    ul li::before {
      margin-inline-start: calc((var(--spacing-md) + 2px) * -1);
      content: "⁕";
      position: absolute;
      color: inherit;
    }
    ul li:is(:hover, :focus-within)::before {
      color: var(--color-link);
    }
  }

  /*─────────────*/
  /* Blockquotes */
  /*─────────────*/
  blockquote {
    --blockquote-border-color: var(--color-border);
    --blockquote-text-color: var(--color-text);
    color: var(--blockquote-text-color);
    position: relative;
  }
  /* with only blockquote nesting will work (except for code blocks) */
  blockquote p:not(:last-child), blockquote p:only-child {
    border-inline-start: 2px solid var(--blockquote-border-color);
    padding-inline-start: var(--spacing-sm);
  }

  blockquote:hover {
    --blockquote-border-color: var(--color-accent);
    --blockquote-text-color: var(--color-contrast);
  }
  blockquote p:first-child::before {
    content: "“";
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1;
  }
  blockquote p:last-child:not(:first-child)::before {
    content: "— ";
    font-style: normal;
  }
  blockquote p:first-child::after {
    content: "\200A”";
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1;
  }

  /*───────────────────────────*/
  /* Inline Code & Code Blocks */
  /*───────────────────────────*/
  code {
    font-family: "GeistMono", ui-monospace, Menlo, Consolas, monospace;
  }
  pre {
    font-family: "GeistMono", ui-monospace, Menlo, Consolas, monospace;
    padding: var(--spacing-md);
    margin: var(--spacing-lg) calc(var(--spacing-md) * -1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
  }
  [tabindex="0"]:focus-visible {
    outline-color: var(--color-link);
    outline-offset: var(--spacing-xxs);
    outline-style: dashed;
    outline-width: 2px;
  }
  pre code {
    white-space: pre-wrap;
    word-break: break-all;
  }

  /*────────*/
  /* Tables */
  /*────────*/
  table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-lg) 0;
    color: var(--color-text);
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  th, td {
    padding: var(--spacing-md);
    border-block-end: 1px solid var(--color-border);
    text-align: left;
    word-break: break-word;
  }
  th {
    background-color: var(--color-background);
    font-weight: 600;
  }

  /*──────────────────*/
  /* Definition Lists */
  /*──────────────────*/
  dt {
    color: var(--color-contrast);
    margin-block-start: var(--spacing-xs);
  }
  dd {
    margin-inline-start: var(--spacing-sm);
  }

  /*──────────────────*/
  /* Images & Figures */
  /*──────────────────*/
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  figure {
    margin: var(--spacing-lg) 0;
    /* might add box-shadow in the future */
  }
  figure:has(figcaption){
    border-color: var(--color-border);
    border-style: solid;
    border-width: 1px;
  }
  figcaption {
    color: var(--color-text-muted);
    margin-inline-start: var(--spacing-sm);
    margin-block-start: var(--spacing-xs);
  }
  figcaption {
    margin-block-start: var(--spacing-xs);
    margin-block-end: var(--spacing-xs);
  }
  figcaption p {
    color: var(--color-text-muted);
    font-style: italic;
  }

  /*─────────────────────────*/
  /* Details/Summary Toggles */
  /*─────────────────────────*/
  details > summary {
    list-style: none;
    cursor: pointer;
  }
  summary::marker,
  summary::-webkit-details-marker {
    display: none;
  }
  details > summary::after {
    content: ' [Show ↓]';
    color: var(--color-contrast);
    font-weight: 600;
  }
  details[open] > summary::after {
    content: ' [Hide ↑]';
    color: var(--color-contrast);
    font-weight: 600;
  }
  .js-enabled details > summary::after {
    content: none;
  }
  details > ol {
    margin-left: 0;
    margin-right: 0;
  }
}

/*──────────────────────────────────────────────────────────────────────────
  4. LAYOUT LAYER
──────────────────────────────────────────────────────────────────────────*/
@layer layout {
  body {
    display: grid;
    grid-template-columns: 1fr minmax(auto, 56ch) 1fr;
    gap: 1rem;
  }
  main {
    grid-column: 2;
    margin-block-start: max(1rem, env(safe-area-inset-top));
    margin-block-end: max(1rem, env(safe-area-inset-bottom));
  }
}

/*──────────────────────────────────────────────────────────────────────────
  5. COMPONENTS LAYER
──────────────────────────────────────────────────────────────────────────*/
@layer components {
  .footnotes {
    margin-block-start: var(--spacing-lg);
  }
  .footnotes hr {
    /* display: none; */
    margin-block: var(--spacing-xs);
  }
  .footnotes::before {
    content: "Footnotes";
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-contrast);
  }

  a.link--internal-page,
  a.link--internal-other,
  nav#TableOfContents a {
    box-shadow: none;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: var(--color-border);
    -webkit-text-decoration-color: var(--color-border);
    text-decoration-thickness: 1.5px;
    -webkit-text-decoration-thickness: 1.5px;
    text-underline-position: from-font;
  }

  a.link--external::after {
    content: "↗";
  }
}

/*──────────────────────────────────────────────────────────────────────────
  6. UTILITIES LAYER
──────────────────────────────────────────────────────────────────────────*/
@layer utilities {
  .text-muted {
    color: var(--color-text-muted);
  }
  .tabular-nums {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
  }
  .mono {
    font-family: "GeistMono", monospace;
  }
  .highlight {
    color: var(--color-black);
    background-color: var(--color-accent);
    padding-inline: 2px;
  }
  li:has(.rating-great)::marker {
    content: "☆ ";
  }
  li:has(.rating-outstanding)::marker {
    content: "★ ";
  }
  /* Safari supports selector(::marker) but ignores content on it. */
  /* So we hide the native marker and inject our own via ::before */
  @supports (hanging-punctuation: first)
    and (font: -apple-system-body)
    and (-webkit-appearance: none) {
    li:has(.rating-great)::before {
      content: "☆";
      margin-inline-start: calc((var(--spacing-md) + 5px) * -1);
    }
    li:has(.rating-outstanding)::before {
      content: "★";
      margin-inline-start: calc((var(--spacing-md) + 5px) * -1);
    }
  }
}