@stnd/styles 0.5.0 → 0.5.2

package/_standard-02-color.scss

@@ -327,6 +327,10 @@
   --color-bold: var(--color-light-bold, var(--color-foreground));
   --color-on-accent: var(--color-background);
 
+  /* Fixed 2026-07-14 — purple/pink/brown now correctly switch to dark
+     variants in all three dark-mode contexts, plus added missing
+     non-OKLCH fallbacks. */
+
   /* ===================================================================
      STAGE 4: COMPUTED SEMANTIC COLORS
      Derived from the scheme-aware --color-foreground/--color-background.
@@ -375,8 +379,9 @@
     inset 0 1px 0 0 var(--color-highlight), 0 0 0 1px var(--color-border),
     var(--shadow-ambient);
 
-  /* Composed presets */
-  --shadow: var(--shadow-ambient), var(--shadow-ambient);
+  /* Composed presets. Fixed 2026-07-14 — was accidentally doubled, now
+     matches the --shadow-lg/-xl progressive pattern (one layer). */
+  --shadow: var(--shadow-ambient);
   --shadow-lg: var(--shadow-ambient), var(--shadow-lift);
   --shadow-xl: var(--shadow-ambient), var(--shadow-lift), var(--shadow-glow);
 
@@ -407,7 +412,6 @@
   /* ===================================================================
      STAGE 6: DESIGN TOKENS (Border Shorthands)
      =================================================================== */
-  --border: 0 solid transparent;
   --border-transparent: var(--stroke-width) solid transparent;
   --border-accent: var(--stroke-width) solid
     oklch(from var(--color-accent) l c h / 0.07);
@@ -443,6 +447,9 @@
     --color-cyan: var(--color-dark-cyan);
     --color-blue: var(--color-dark-blue);
     --color-magenta: var(--color-dark-magenta);
+    --color-purple: var(--color-dark-purple);
+    --color-pink: var(--color-dark-pink);
+    --color-brown: var(--color-dark-brown);
 
     --color-link: var(--color-dark-link);
     --color-italic: var(--color-dark-italic, var(--color-foreground));
@@ -570,6 +577,9 @@
     --color-cyan: var(--color-dark-cyan);
     --color-blue: var(--color-dark-blue);
     --color-magenta: var(--color-dark-magenta);
+    --color-purple: var(--color-dark-purple);
+    --color-pink: var(--color-dark-pink);
+    --color-brown: var(--color-dark-brown);
     --color-link: var(--color-dark-link);
     --color-italic: var(--color-dark-italic, var(--color-foreground));
     --color-bold: var(--color-dark-bold, var(--color-foreground));
@@ -588,6 +598,9 @@
   --color-cyan: var(--color-dark-cyan);
   --color-blue: var(--color-dark-blue);
   --color-magenta: var(--color-dark-magenta);
+  --color-purple: var(--color-dark-purple);
+  --color-pink: var(--color-dark-pink);
+  --color-brown: var(--color-dark-brown);
   --color-link: var(--color-dark-link);
   --color-italic: var(--color-dark-italic, var(--color-foreground));
   --color-bold: var(--color-dark-bold, var(--color-foreground));
@@ -614,6 +627,9 @@
    STAGE 8: FALLBACKS — Graceful Degradation
    Browsers without OKLCH support (Safari <16.4, Chrome <111, FF <113)
    get concrete color values so the UI remains usable.
+
+   Fixed 2026-07-14 — added missing light/dark purple & pink fallbacks
+   below.
    ===================================================================== */
 @supports not (color: oklch(50% 0.2 180)) {
   #{$stnd-theme-scope} {
@@ -629,6 +645,8 @@
     --color-light-cyan: #2a8a8a;
     --color-light-blue: #3a60b0;
     --color-light-magenta: #9040a0;
+    --color-light-purple: #8050b0;
+    --color-light-pink: #c05090;
     --color-light-accent: #2a8a8a;
 
     /* Dark palette fallbacks */
@@ -639,6 +657,8 @@
     --color-dark-cyan: #50b0b0;
     --color-dark-blue: #6080d0;
     --color-dark-magenta: #b060c0;
+    --color-dark-purple: #a070d0;
+    --color-dark-pink: #d070a0;
     --color-dark-accent: #50b0b0;
 
     /* Computed fallbacks */

package/_standard-03-typography.scss

@@ -105,6 +105,11 @@ h6 {
   max-width: 100%;
 }
 
+/* Fixed 2026-07-14 — the mixin's --target-lh now reads
+   --font-header-line-height as an override. The line-height set below
+   for h1/h2/h3 is still always overridden further down by
+   @include grid-line-height(...) (~line 393), which is what actually
+   controls heading line-height now. */
 h1 {
   font-weight: var(--font-weight-h1);
   font-size: clamp(var(--size-xl), 5.5vw, var(--size-2xl));
@@ -314,26 +319,27 @@ sup {
   vertical-align: super;
 }
 
+/* Duplicate of the `em` rule at line 82 (same --color-italic), this copy
+   additionally sets font-style — harmless overlap, not a conflict. */
 em {
   color: var(--color-italic);
   font-style: italic;
 }
 
-.font-interface {
-  font-family: var(--font-interface), system-ui, sans-serif;
-  font-variation-settings: var(--font-interface-variation);
-  font-feature-settings: var(--font-interface-feature);
-  font-size: 12px;
-}
-
 /**
  * @component Design Tokens
  * @category Foundation
  * @description Primitive design tokens forming the foundation of the design system.
  * Includes "Self-Aware" fluid typography that scales based on the Optical Ratio.
+ *
+ * This block redeclares --font-size and --line-height, silently superseding
+ * the flat --font-size: 1rem set in _standard-01-token.scss (same selector,
+ * this file loads later in standard.scss's @use order, so this wins) —
+ * deliberate layering (naive default → fluid enhancement), not a conflict,
+ * but non-obvious without reading both files.
  */
 
-#{$stnd-scope} {
+#{$stnd-theme-scope} {
   /* ===== 2. THE META-COGNITION (Fluid Slopes) =====
      Instead of magic numbers, we use the Ratio to determine "Physics".
 
@@ -345,7 +351,7 @@ em {
 
   /* Growth Factor: How aggressive is the resizing?
      We multiply the slope by 1vw to create a viewport-relative unit. */
-  --fluid-growth: calc(var(--physics-slope) * 0.8vw);
+  --fluid-growth: calc(var(--physics-slope) * 0.5vw);
 
   /* Tension Factor: How much do we tighten leading as we grow?
      Higher ratios need more tension to keep large text readable. */
@@ -355,7 +361,7 @@ em {
      Base size starts at 1rem and grows according to the Physics Slope.
   */
   --base-size: var(--font-text-size, 1rem);
-  
+
   --font-size: clamp(
     var(--base-size),
     calc(var(--base-size) + var(--fluid-growth)),
@@ -377,11 +383,10 @@ em {
   );
 }
 
-
-
 @mixin grid-line-height($tightness: 1.1) {
-  /* The "Target" is simply the font-size * tightness */
-  --target-lh: calc(1em * #{$tightness});
+  /* The "Target" is simply the font-size * tightness, unless a note
+     overrides it via --font-header-line-height in frontmatter */
+  --target-lh: calc(1em * var(--font-header-line-height, #{$tightness}));
 
   /* The Snap: Force it to be a multiple of --baseline */
   line-height: round(up, var(--target-lh), var(--baseline)) !important;

package/_standard-04-grid.scss

@@ -9,13 +9,13 @@
  * All gaps align to the vertical rhythm system.
  *
  * @prop {class} .grid 12-column grid container
- * @prop {class} .grid-2 through .grid-12 Predefined grid layouts (2-12 columns)
- * @prop {class} .col-1 through .col-12 Column span modifiers
- * @prop {class} .col-sm-* Responsive columns at 768px+
- * @prop {class} .col-lg-* Responsive columns at 1024px+
+ * @prop {class} .col-1 through .col-12 Column span modifiers (direct children of .grid)
+ * @prop {class} .sm\:col-* Responsive columns at max-width 768px (mobile)
+ * @prop {class} .lg\:col-* Responsive columns at min-width 1024px (desktop)
  * @prop {class} .start-{n} Start column position (1-12)
- * @prop {class} .gap-compact compact gap (1/4 space)
- * @prop {class} .gap-wide Wide gap (1.5 space)
+ * @prop {class} .grid.no-gap Removes row-gap
+ * @prop {class} .grid.compact Compact gap (--trim)
+ * @prop {class} .grid.relaxed Wide gap (--space)
  *
  * @example
  * // Basic 12-column grid with equal width columns
@@ -28,8 +28,8 @@
  *
  * // Responsive grid layout
  * <div class="grid">
- *   <div class="col-12 col-sm-6 col-lg-3">Card</div>
- *   <div class="col-12 col-sm-6 col-lg-3">Card</div>
+ *   <div class="col-12 sm:col-6 lg:col-3">Card</div>
+ *   <div class="col-12 sm:col-6 lg:col-3">Card</div>
  * </div>
  *
  * // Main content + sidebar layout
@@ -47,10 +47,15 @@
    Relies on logical properties and Harmony tokens: --base, calc(var(--space) / 4), --base-2, borders, etc.
 */
 
-/* Grid container */
-.grid,
-[class^="grid-"],
-.grid-row {
+/* Fixed 2026-07-14 — was attribute selectors (order-dependent), now an
+   explicit selector list built once via $grid-selectors (order-independent). */
+$grid-selectors: ".grid, .grid-row";
+@for $i from 1 through 12 {
+  $grid-selectors: $grid-selectors + ", .grid-#{$i}";
+}
+
+/* Grid container. */
+#{$grid-selectors} {
   display: grid;
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
@@ -58,8 +63,7 @@
   row-gap: var(--gap);
 }
 
-.grid,
-[class^="grid-"] {
+#{$grid-selectors} {
   > * {
     margin: 0;
   }
@@ -73,25 +77,26 @@
 /* TYPOGRAPHIC NUANCES         */
 /* =========================== */
 
-[class^="grid"] > * {
+#{$grid-selectors} > * {
   min-width: 0;
   /* ← Force items to shrink below content size */
   margin-block: 0;
 }
 
 @media (max-width: #{$mobile}) {
-  [class^="grid"] > * {
+  #{$grid-selectors} > * {
     min-width: 0;
   }
 }
 
-[class^="grid"] {
+#{$grid-selectors} {
   .card {
     margin: 0;
   }
 }
 
-/* Gap variants aligned to rhythm */
+/* Gap variants aligned to rhythm — this is the LIVE definition (sets --gap,
+   the property actually consumed by column-gap/row-gap above). */
 :is(.grid, [class^="grid-"]).compact {
   --gap: var(--trim);
 }
@@ -267,19 +272,11 @@ hr.col-row {
   z-index: 1;
 }
 
-/* Row gap utilities for grid system */
+/* Row gap utilities for grid system. */
 .grid.no-gap {
   row-gap: 0;
 }
 
-.grid.compact {
-  --grid-gap: var(--leading);
-}
-
-.grid.relaxed {
-  --grid-gap: var(--space-2);
-}
-
 /* Common layout containers inherit rhythm to cascade deeper */
 .box,
 .grid > .col-1,
@@ -309,6 +306,6 @@ hr.col-row {
   }
 }
 
-[class|="grid"] .container-hero {
+#{$grid-selectors} .container-hero {
   margin-inline: 0;
 }

package/_standard-05-rhythm.scss

@@ -9,6 +9,24 @@
      Think of it as "overflow: hidden" but without clipping content. */
   display: flow-root;
 
+  /* Every selector below is wrapped in :where(), including .rhythm itself
+     — that's zero specificity everywhere, by design (easy for any other
+     rule to override). Which means SOURCE ORDER is the only tiebreaker
+     when more than one of these rules matches the same element (e.g. a
+     paragraph immediately before an h1 matches both the base 1x rule
+     below AND the heading exception further down — the exception wins
+     purely because it's declared later). Do not reorder this block
+     without checking every rule still resolves the way you expect. */
+
+  /* AUDIT FLAG (2026-07-14): this base rule has no `>` — it applies at
+     ANY nesting depth inside .rhythm, not just direct children. Every
+     other rule in this block (the double-tag 2x rule right below, and
+     all EXCEPTIONS) is `>`-scoped to direct children only. So a heading
+     nested two levels deep (inside a .callout, say) gets the base 1x
+     spacing but never the heading-specific 2x/3x exceptions a top-level
+     heading would get. Possibly intentional (exceptions are for
+     top-level document flow only) — flagging since the asymmetry itself
+     isn't declared anywhere, just falls out of one missing `>`. */
   :where(:is(#{$rhythm-tags})) + :where(:is(#{$rhythm-tags})) {
     margin-block-start: calc(var(--gap) * 1);
   }
@@ -46,6 +64,9 @@
 
   //*/
 
+  /* Flex children use `gap` for spacing, not margin (see cheat sheet:
+     "gap on the parent, not margin on children") — zero out any rhythm
+     margin that would otherwise stack with the flex gap. */
   .flex > * {
     margin-block-start: 0;
   }

package/_standard-06-prose.scss

@@ -75,7 +75,7 @@
   transition: grid-template-columns var(--transition);
 
   position: relative;
-  max-width: var(--prose-max-width, var(--max-width));
+  max-width: var(--body-max-width);
   /*z-index: var(--z-base);*/
   /* Default content positioning */
 
@@ -88,6 +88,13 @@
       padding-inline var(--transition);
   }
 
+  /* Astro islands render as <astro-island> with display:contents, so their
+     children — not the island — are the grid items and need placement too. */
+  > astro-island > * {
+    grid-column: content;
+    min-width: 0;
+  }
+
   > .small,
   > .container-small,
   > .callout,
@@ -196,9 +203,6 @@
     margin-inline: 0 !important;
   }
 
-  /* Note: Page's main title h1:first-child retains spacing via direct child selector */
-  /* The > h1:first-child selector in h1 rule ensures it overrides rhythm's > * margin-reset */
-
   /* Basic media styling */
   img,
   audio,
@@ -260,17 +264,19 @@
     overflow-wrap: break-word;
   }
 
+  /* Fixed 2026-07-14 — swapped undefined tokens for their real equivalents
+     (--color-muted, --color-accent, --color-surface-high). */
   .mycelial-graft {
     text-decoration: none;
-    border-bottom: 1px dotted var(--color-text-muted);
+    border-bottom: 1px dotted var(--color-muted);
     color: inherit;
     cursor: help;
     transition: all 0.2s ease;
 
     &:hover {
-      color: var(--color-primary);
-      border-bottom: 1px solid var(--color-primary);
-      background-color: var(--color-surface-hover);
+      color: var(--color-accent);
+      border-bottom: 1px solid var(--color-accent);
+      background-color: var(--color-surface-high);
     }
   }
 }

package/_standard-07-base.scss

@@ -64,7 +64,7 @@ body {
   padding: var(--gap-body);
   padding-top: var(--gap-header);
   padding-bottom: var(--gap-footer);
-  max-width: var(--body-max-width, var(--max-width));
+  max-width: var(--body-max-width);
   margin-inline: auto;
 
   transition:
@@ -75,8 +75,8 @@ body {
     margin var(--transition);
 
   [id] {
+    /* Keeps anchor-linked headings from landing under the sticky header. */
     scroll-margin-top: calc(var(--space-2) + var(--gap-header));
-    /* Adjust value as needed background: var(--color-surface-highest); background: var(--color-surface-highest); background: var(--color-surface-highest); background: var(--color-surface-highest); */
   }
 }
 
@@ -141,6 +141,10 @@ mark {
 
 section.container-hero {
   padding-block: var(--space-2);
+  /* --border currently resolves to `none` — see the AUDIT FLAG in
+     _standard-02-color.scss (duplicate --border declaration, "0 solid
+     transparent" then "none" wins). This section's top/bottom border is
+     invisible today as a result — real-world impact of that flag. */
   border-top: var(--border);
   border-bottom: var(--border);
   box-shadow: var(--shadow);
@@ -166,15 +170,28 @@ dt {
 /* =========================== */
 
 /**
- * Utilities to negate body padding for full-width elements
- * Useful for footers, headers, or other elements that should extend to viewport edges
+ * AUDIT NOTE (2026-07-14): this docblock previously described a
+ * .negate-body-padding / .negate-body-padding-full / .negate-body-padding-bottom
+ * API — those class names don't exist anywhere in this file or the
+ * codebase (grepped), never did as far as git history in this session
+ * shows. The real, implemented class is .no-body-margin, and it's far
+ * narrower than "footers, headers, or other elements" implied: it only
+ * matches <footer>/<header> that are DIRECT children of <body> AND the
+ * first/last element of that type (body > footer.no-body-margin:last-of-type
+ * / body > header.no-body-margin:first-of-type). Neither the old
+ * (fictional) nor the real class name is used anywhere in apps/ today —
+ * corrected the docs to match reality rather than delete the utility.
  *
- * .negate-body-padding — Negates horizontal body padding only
- * .negate-body-padding-full — Negates all body padding (horizontal + bottom)
- * .negate-body-padding-bottom — Negates extra bottom body padding (1.5× multiplier)
+ * Utilities to negate body padding for a direct-child header/footer that
+ * should extend to the viewport edges.
+ *
+ * .no-body-margin — on a <footer> or <header> that is a direct child of
+ *   <body> and the last/first element of its type, respectively. Negates
+ *   horizontal body padding (both variants); the footer variant also
+ *   negates the extra 1.5× bottom padding, the header variant the top.
  *
  * Usage:
- * <footer class="negate-body-padding-full">
+ * <footer class="no-body-margin">
  *   Full-width footer content
  * </footer>
  */
@@ -207,10 +224,13 @@ body > footer.no-body-margin:last-of-type {
   }
 }
 
+/* Fixed 2026-07-14 — was margin-block-end (wrong property, copy-paste
+   typo), now correctly overrides margin-block-start to match the footer's
+   symmetric pattern. */
 body > header.no-body-margin:first-of-type {
   margin-block-start: calc(var(--gap-body) * -1);
 
   @media (max-width: #{$small}) {
-    margin-block-end: calc(var(--gap-body-mobile) * -1);
+    margin-block-start: calc(var(--gap-body-mobile) * -1);
   }
 }

package/_standard-08-media.scss

@@ -4,6 +4,10 @@
 /* MEDIA                       */
 /* =========================== */
 
+/* --border currently resolves to `none` everywhere it's used in this file
+   (3 places) — see the AUDIT FLAG in _standard-02-color.scss (duplicate
+   --border declaration; the "none" copy wins). Media elements here get no
+   visible border as a result. */
 img,
 video,
 audio,
@@ -23,7 +27,11 @@ iframe,
 /* =========================== */
 .video-container:has(video) {
   position: relative;
-  /* padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  /* Unlike the iframe variant in _standard-06-prose.scss, this one holds a
+     native <video> element, which has real intrinsic dimensions — the
+     legacy padding-bottom:56.25% aspect-ratio hack (disabled below) isn't
+     needed the way it is for iframes. */
+  /* padding-bottom: 56.25% — 16:9 aspect ratio, disabled, see above */
   border: none;
   box-shadow: none;
   overflow: hidden;
@@ -160,11 +168,10 @@ html:not(.js-image-zoom-enabled):has(img:active)::before {
 /* lightbox experience with keyboard navigation, etc.               */
 /* ================================================================ */
 
-/* Lock the page scroll when the JS overlay is active
+/* Lock the page scroll when the JS overlay is active */
 html.image-zoomed-active {
-    overflow: hidden;
+  overflow: hidden;
 }
-*/
 /* The overlay container created by the JS */
 .image-zoom-overlay {
   position: fixed;
@@ -175,7 +182,6 @@ html.image-zoomed-active {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--gap-body);
   padding: var(--space-4);
   margin: 0;
   opacity: 0;
@@ -208,7 +214,9 @@ html.image-zoomed-active {
   transform: scale(1);
 }
 
-@media (min-width: 768px) {
+/* Uses #{$small} — same breakpoint variable as everywhere else in the
+   framework. */
+@media (min-width: #{$small}) {
   /* Global zoomable image cursor */
   img:not([data-no-zoom]) {
     cursor: zoom-in !important;

package/_standard-09-lists.scss

@@ -62,9 +62,11 @@ ol > li::before {
   font-size: var(--size-sm);
 }
 
+/* Fixed 2026-07-14 — was checking for .display-flex (not a real class
+   anywhere), now correctly checks .flex. */
 /* Inline lists override - protects layouts using flex */
-ul:where(.display-flex, [style*="display: flex"], [style*="display:flex"]) li,
-ol:where(.display-flex, [style*="display: flex"], [style*="display:flex"]) li {
+ul:where(.flex, [style*="display: flex"], [style*="display:flex"]) li,
+ol:where(.flex, [style*="display: flex"], [style*="display:flex"]) li {
   margin-block-end: 0;
 }
 
@@ -81,22 +83,31 @@ ol:where(.display-flex, [style*="display: flex"], [style*="display:flex"]) li {
   }
 }
 
+/* AUDIT FLAG (2026-07-14): .compact and .relaxed are bare, unnamespaced
+   class names also defined in _standard-50-utilities.scss (different
+   rules) and — for .compact/.relaxed specifically — in
+   _standard-04-grid.scss as .grid.compact/.grid.relaxed (qualified, so
+   that one doesn't collide). An element with class="compact" containing
+   <li> children gets BOTH this file's li+li spacing AND whatever
+   _standard-50-utilities.scss's .compact does, unconditionally — no way
+   to opt into one without the other. Flagging the collision rather than
+   renaming; not obvious which file should own the name. (The dead
+   --base-gap sub-issue previously flagged here has been cleaned up: the
+   declarations were removed from this file and from
+   _standard-50-utilities.scss.) */
 .compact {
-  --base-gap: var(--space-d2);
   li + li {
     margin-block-start: var(--space-d2);
   }
 }
 
 .tight {
-  --base-gap: var(--space-d3);
   li {
     margin-block-end: var(--space-d3);
   }
 }
 
 .relaxed {
-  --base-gap: var(--space-2);
   li {
     margin-block-end: var(--space-2);
   }

package/_standard-10-tables.scss

@@ -9,6 +9,9 @@ table {
   width: 100%;
 }
 
+/* padding/margin on <tr> have no effect — table rows don't support box
+   model properties in the CSS table layout spec, browsers ignore these.
+   Harmless no-op, not fixing since it's inert either way. */
 tr {
   padding: 0;
   margin: 0;
@@ -17,11 +20,15 @@ tr {
 th,
 td {
   text-align: left;
+  /* --border currently resolves to `none` — see the AUDIT FLAG in
+     _standard-02-color.scss (duplicate --border declaration). */
   border: var(--border);
   line-height: var(--line-height-compact);
   padding: var(--space-d2);
   font-size: var(--size-sm);
-  min-height: var(--line-height);
+  /* Fixed 2026-07-14 — was an invalid unitless min-height, now derives a
+     real length from the line-height already set above. */
+  min-height: calc(1em * var(--line-height-compact));
 }
 
 th {

package/_standard-11-forms.scss

@@ -49,9 +49,13 @@ textarea {
   border-radius: var(--radius-sm);
   color: var(--color-foreground);
   background: var(--color-surface);
-  /* shadcn-style raised effect */
+  /* shadcn-style raised effect. --border currently resolves to `none` —
+     see the AUDIT FLAG in _standard-02-color.scss. */
   border: var(--border);
   box-shadow: var(--shadow-raised);
+  /* Transparent outline at full width reserves the space a real focus
+     outline (set on :focus below) will need — prevents layout shift when
+     the outline color actually appears. */
   outline: var(--stroke-width) solid transparent;
   outline-offset: var(--stroke-width);
   transition: all var(--transition-fast);
@@ -66,7 +70,6 @@ textarea {
 select {
   width: 100%;
   font-family: var(--font-interface), system-ui, sans-serif;
-  font-family: var(--font-interface), system-ui, sans-serif;
   font-weight: var(--font-weight);
   padding: var(--space-d8) var(--space-d4);
   font-size: 1em;
@@ -276,9 +279,11 @@ input[type="checkbox"][role="switch"] {
     }
   }
 
+  /* Fixed 2026-07-14 — was a typo (--color-on-cce), corrected to
+     --color-on-accent. */
   &:checked:hover {
     &::before {
-      background: var(--color-on-cce) !important;
+      background: var(--color-on-accent) !important;
     }
   }
 }
@@ -303,18 +308,17 @@ input[type="range"] {
   /* Crucial: removes text-input borders */
   background-origin: border-box;
 
-  /*
-   * THE FILL MAGIC
-   * uses the --slider-value variable passed in the style attribute
-   */
+  /* Fixed 2026-07-14 — this gradient is real and wired up by
+     Slider.astro's JS (sets --slider-value); the flat color below it was
+     silently overriding it. Removed the override so the fill effect
+     actually renders. */
   background: linear-gradient(
     to right,
     var(--color-background, var(--color-accent)) 0%,
-    var(--color-background, var(--color-accent)) var(--slider-value),
-    var(--color-red, var(--color-surface)) var(--slider-value),
+    var(--color-background, var(--color-accent)) var(--slider-value, 50%),
+    var(--color-red, var(--color-surface)) var(--slider-value, 50%),
     var(--color-red, var(--color-surface)) 100%
   );
-  background: var(--color-surface-lowest);
 }
 
 input[type="range"]::-webkit-slider-thumb {

package/_standard-12-code.scss

@@ -1,6 +1,7 @@
 @use "standard-00-variables" as *;
 /* Note: General color utilities (.text-muted, .text-subtle, .text-accent, .bg-surface, .border-*) */
-/* moved to standard-98-utilities.scss for better layer organization */
+/* moved to _standard-50-utilities.scss for better layer organization (comment said
+   "standard-98-utilities.scss" — that file doesn't exist, fixed the reference) */
 
 /* PrismJS syntax highlighting - Language agnostic tokens */