@semanticus/semanticus-css 0.4.0 → 0.7.0

package/src/utilities/colors/_background-colors.css

@@ -1,49 +1,56 @@
 .text-bg-primary {
   --color-text: var(--color-primary-inverse) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: var(--color-primary-inverse) !important;
+  color: var(--color-text) !important;
   background-color: rgba(var(--primary-rgb), var(--bg-opacity, 1)) !important;
 }
 
 .text-bg-secondary {
   --color-text: var(--color-secondary-inverse) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: var(--color-secondary-inverse) !important;
+  color: var(--color-text) !important;
   background-color: rgba(var(--secondary-rgb), var(--bg-opacity, 1)) !important;
 }
 
 .text-bg-success {
   --color-text: var(--color-success-inverse) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: var(--color-success-inverse) !important;
+  color: var(--color-text) !important;
   background-color: rgba(var(--success-rgb), var(--bg-opacity, 1)) !important;
 }
 
 .text-bg-info {
   --color-text: var(--color-info-inverse) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: var(--color-info-inverse) !important;
+  color: var(--color-text) !important;
   background-color: rgba(var(--info-rgb), var(--bg-opacity, 1)) !important;
 }
 
 .text-bg-warning {
   --color-text: var(--color-warning-inverse) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: var(--color-warning-inverse) !important;
+  color: var(--color-text) !important;
   background-color: rgba(var(--warning-rgb), var(--bg-opacity, 1)) !important;
 }
 
 .text-bg-danger {
   --color-text: var(--color-danger-inverse) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: var(--color-danger-inverse) !important;
+  color: var(--color-text) !important;
   background-color: rgba(var(--danger-rgb), var(--bg-opacity, 1)) !important;
 }
 
 .text-bg-contrast {
   --color-text: var(--color-contrast-inverse) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: var(--color-contrast-inverse) !important;
+  color: var(--color-text) !important;
   background-color: rgba(var(--contrast-rgb), var(--bg-opacity, 1)) !important;
 }
 
@@ -207,3 +214,28 @@
 .bg-gradient {
   background-image: var(--gradient) !important;
 }
+
+/* Dark mode: headings should be lighter than inverse text (mix in white) */
+@media (prefers-color-scheme: dark) {
+  .text-bg-primary,
+  .text-bg-secondary,
+  .text-bg-success,
+  .text-bg-info,
+  .text-bg-warning,
+  .text-bg-danger,
+  .text-bg-contrast {
+    --color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
+  }
+}
+
+[data-theme="dark"] {
+  .text-bg-primary,
+  .text-bg-secondary,
+  .text-bg-success,
+  .text-bg-info,
+  .text-bg-warning,
+  .text-bg-danger,
+  .text-bg-contrast {
+    --color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
+  }
+}

package/src/utilities/colors/_text-colors.css

@@ -88,68 +88,90 @@
 
 .text-primary {
   --text-opacity: 1;
+  --color-text: rgba(var(--primary-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--primary-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-secondary {
   --text-opacity: 1;
+  --color-text: rgba(var(--secondary-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--secondary-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-success {
   --text-opacity: 1;
+  --color-text: rgba(var(--success-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--success-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-info {
   --text-opacity: 1;
+  --color-text: rgba(var(--info-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--info-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-warning {
   --text-opacity: 1;
+  --color-text: rgba(var(--warning-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--warning-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-danger {
   --text-opacity: 1;
+  --color-text: rgba(var(--danger-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--danger-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-contrast {
   --text-opacity: 1;
+  --color-text: rgba(var(--contrast-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--contrast-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-body {
   --text-opacity: 1;
+  --color-text: rgba(var(--body-color-rgb), var(--text-opacity)) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: rgba(var(--body-color-rgb), var(--text-opacity)) !important;
+  color: var(--color-text) !important;
 }
 
 .text-muted {
   --text-opacity: 1;
+  --color-text: var(--secondary-color) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: var(--secondary-color) !important;
+  color: var(--color-text) !important;
 }
 
 .text-body-secondary {
   --text-opacity: 1;
+  --color-text: var(--secondary-color) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: var(--secondary-color) !important;
+  color: var(--color-text) !important;
 }
 
 .text-body-emphasis {
   --text-opacity: 1;
+  --color-text: var(--emphasis-color) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
 
-  color: var(--emphasis-color) !important;
+  color: var(--color-text) !important;
 }
 
 .text-reset {
@@ -175,31 +197,52 @@
 }
 
 .text-primary-emphasis {
-  color: var(--primary-text-emphasis) !important;
+  --color-text: var(--primary-text-emphasis) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+
+  color: var(--color-text) !important;
 }
 
 .text-secondary-emphasis {
-  color: var(--secondary-text-emphasis) !important;
+  --color-text: var(--secondary-text-emphasis) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+
+  color: var(--color-text) !important;
 }
 
 .text-success-emphasis {
-  color: var(--success-text-emphasis) !important;
+  --color-text: var(--success-text-emphasis) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+
+  color: var(--color-text) !important;
 }
 
 .text-info-emphasis {
-  color: var(--info-text-emphasis) !important;
+  --color-text: var(--info-text-emphasis) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+
+  color: var(--color-text) !important;
 }
 
 .text-warning-emphasis {
-  color: var(--warning-text-emphasis) !important;
+  --color-text: var(--warning-text-emphasis) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+
+  color: var(--color-text) !important;
 }
 
 .text-danger-emphasis {
-  color: var(--danger-text-emphasis) !important;
+  --color-text: var(--danger-text-emphasis) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+
+  color: var(--color-text) !important;
 }
 
 .text-contrast-emphasis {
-  color: var(--contrast-text-emphasis) !important;
+  --color-text: var(--contrast-text-emphasis) !important;
+  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
+
+  color: var(--color-text) !important;
 }
 
 .link-opacity-10 {
@@ -369,3 +412,50 @@
 .link-underline-opacity-100-hover:hover {
   --link-underline-opacity: 1;
 }
+
+/* Dark mode: headings should be lighter than text color (mix in white) */
+@media (prefers-color-scheme: dark) {
+  .text-primary,
+  .text-secondary,
+  .text-success,
+  .text-info,
+  .text-warning,
+  .text-danger,
+  .text-contrast,
+  .text-body,
+  .text-muted,
+  .text-body-secondary,
+  .text-body-emphasis,
+  .text-primary-emphasis,
+  .text-secondary-emphasis,
+  .text-success-emphasis,
+  .text-info-emphasis,
+  .text-warning-emphasis,
+  .text-danger-emphasis,
+  .text-contrast-emphasis {
+    --color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
+  }
+}
+
+[data-theme="dark"] {
+  .text-primary,
+  .text-secondary,
+  .text-success,
+  .text-info,
+  .text-warning,
+  .text-danger,
+  .text-contrast,
+  .text-body,
+  .text-muted,
+  .text-body-secondary,
+  .text-body-emphasis,
+  .text-primary-emphasis,
+  .text-secondary-emphasis,
+  .text-success-emphasis,
+  .text-info-emphasis,
+  .text-warning-emphasis,
+  .text-danger-emphasis,
+  .text-contrast-emphasis {
+    --color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
+  }
+}

package/src/utilities/index.css

@@ -4,8 +4,8 @@
  * Perfect for utility-first development without semantic components
  */
 
-/* Global variables */
-@import '../_variables.css';
+/* Variables */
+@import './_variables.css';
 
 /* Normalize */
 @import '../_normalize.css';

package/src/utilities/sizing/_height.css

@@ -29,3 +29,7 @@
 .min-vh-100 {
   min-height: 100vh !important;
 }
+
+.min-svh-100 {
+  min-height: 100svh !important;
+}

package/src/utilities/sizing/_width.css

@@ -2,10 +2,18 @@
   width: 25% !important;
 }
 
+.w-40 {
+  width: 40% !important;
+}
+
 .w-50 {
   width: 50% !important;
 }
 
+.w-60 {
+  width: 60% !important;
+}
+
 .w-75 {
   width: 75% !important;
 }

package/src/{_variables.css → variables/_all.css}

@@ -10,123 +10,10 @@
 
 */
 
-/* ==========================================================================
-   1. Base Tokens
-   ========================================================================== */
-
-:root {
-  --transparent: transparent;
-}
-
-/* ==========================================================================
-   Responsive Breakpoints (custom media queries)
-   Used consistently across semantics, variants, and utilities.
-   ========================================================================== */
-
-@custom-media --breakpoint-sm (min-width: 576px);
-@custom-media --breakpoint-md (min-width: 768px);
-@custom-media --breakpoint-lg (min-width: 1024px);
-@custom-media --breakpoint-xl (min-width: 1280px);
-@custom-media --breakpoint-xxl (min-width: 1536px);
-
-/* ==========================================================================
-   2. Typography & Layout Variables (from Pico Theme)
-   ========================================================================== */
-
-:root,
-:host {
-  /* Font Families */
-  --font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--font-family-emoji);
-  --font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-family-emoji);
-  --font-family: var(--font-family-sans-serif);
-
-  /* Typography – base defaults inherited by all elements */
-  --line-height: 1.5;
-  --font-weight: 400;
-  --font-size: 100%; /* Root font-size; overridden per breakpoint below and per element in §6 */
-  --text-underline-offset: 0.1rem;
-
-  /* Borders & Effects – global defaults for border-radius, border-width, outline, and transition */
-  --border-radius: 0.25rem;
-  --border-width: 0.0625rem; /* 1px – base border width used by forms, tables, etc. */
-  --outline-width: 0.125rem; /* 2px – focus-ring width */
-  --transition: 0.2s ease-in-out; /* Default transition timing for interactive state changes */
-
-  /* Spacing – shared base unit used for padding, margins, and gaps throughout the layout */
-  --spacing: 1rem;
-  --typography-spacing-vertical: 1rem; /* Vertical margin below typographic elements (p, lists, etc.) */
-  --block-spacing-vertical: var(--spacing); /* Vertical padding inside block-level components (cards, modals, etc.) */
-  --block-spacing-horizontal: var(--spacing); /* Horizontal padding inside block-level components */
-  --grid-column-gap: var(--spacing); /* Column gap in CSS Grid layouts */
-  --grid-row-gap: var(--spacing); /* Row gap in CSS Grid layouts */
-  --form-element-spacing-vertical: 0.75rem; /* Vertical padding inside form inputs, selects, and textareas */
-  --form-element-spacing-horizontal: 1rem; /* Horizontal padding inside form inputs, selects, and textareas */
-
-  /* Shadows – used by [role="group"] and [role="search"] button/input combos */
-  --group-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Default (no shadow) */
-  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-primary-focus); /* Focus ring when a button inside the group is focused */
-  --group-shadow-focus-with-input: 0 0 0 0.0625rem var(--form-border-color); /* Focus ring when an input inside the group is focused */
-
-  /* Modal – backdrop overlay settings */
-  --modal-overlay-backdrop-filter: blur(0.375rem); /* Applies a blur behind the modal overlay */
-
-  /* Navigation – spacing and breadcrumb configuration */
-  --nav-element-spacing-vertical: 1rem; /* Vertical padding for nav container items */
-  --nav-element-spacing-horizontal: 0.5rem; /* Horizontal padding for nav container items */
-  --nav-link-spacing-vertical: 0.5rem; /* Vertical padding inside nav links */
-  --nav-link-spacing-horizontal: 0.5rem; /* Horizontal padding inside nav links */
-  --nav-breadcrumb-divider: ">"; /* Character displayed between breadcrumb items */
-
-  /* Icons – inline SVG data-URIs used by form elements and UI components */
-  --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); /* Checkmark for checked checkboxes */
-  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); /* Minus icon for indeterminate checkboxes */
-  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* Dropdown arrow for <select> elements */
-  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); /* Calendar icon for date inputs */
-  --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); /* Clock icon for time inputs */
-  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); /* Magnifying glass for search inputs */
-  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); /* X icon for close/dismiss actions (e.g. modal close button) */
-  --icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E"); /* Animated spinner for [aria-busy="true"] elements */
-}
-
-/* Responsive Font Sizes – progressively increase root font-size at wider viewports */
-@media (--breakpoint-sm) {
-  :root,
-  :host {
-    --font-size: 106.25%;
-  }
-}
-
-@media (--breakpoint-md) {
-  :root,
-  :host {
-    --font-size: 112.5%;
-  }
-}
-
-@media (--breakpoint-lg) {
-  :root,
-  :host {
-    --font-size: 118.75%;
-  }
-}
-
-@media (--breakpoint-xl) {
-  :root,
-  :host {
-    --font-size: 125%;
-  }
-}
-
-@media (--breakpoint-xxl) {
-  :root,
-  :host {
-    --font-size: 131.25%;
-  }
-}
+@import './_shared.css';
 
 /* ==========================================================================
-   3. Semantic Colors - Light Theme (Default)
+   Semantic Colors - Light Theme (Default)
    ==========================================================================
 
    Color variable naming convention used throughout sections 3–5:
@@ -202,13 +89,8 @@
   --shadow-md: 0.0625rem 0.125rem 0.5rem rgba(129, 145, 181, 0.15); /* Medium elevation – e.g. dropdowns */
   --shadow-lg: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015); /* Multi-layer realistic shadow – e.g. cards, modals */
 
-  /* Headings – progressively lighter shades from h1 (darkest) to h6 (lightest) */
-  --color-h1: #2d3138;
-  --color-h2: #373c44;
-  --color-h3: #424751;
-  --color-h4: #4d535e;
-  --color-h5: #5c6370;
-  --color-h6: #646b79;
+  /* Headings - base color for progressive lightness via color-mix */
+  --color-heading-base: #2d3138;
 
   /* Mark & Text – colors for <mark>, <ins>, and <del> elements */
   --color-mark-bg: rgb(252.5, 230.5, 191.5); /* Background highlight for <mark> */
@@ -331,7 +213,7 @@
 }
 
 /* ==========================================================================
-   4. Semantic Colors - Dark Theme (System Preference)
+   Semantic Colors - Dark Theme (System Preference)
    ==========================================================================
 
    Applied when the user's OS is set to dark mode AND no explicit
@@ -398,13 +280,8 @@
     --shadow-md: 0.0625rem 0.125rem 0.5rem rgba(7, 8.5, 12, 0.15);
     --shadow-lg: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
 
-    /* Headings */
-    --color-h1: #f0f1f3;
-    --color-h2: #e0e3e7;
-    --color-h3: #c2c7d0;
-    --color-h4: #b3b9c5;
-    --color-h5: #a4acba;
-    --color-h6: #8891a4;
+    /* Headings - base color for progressive lightness via color-mix */
+    --color-heading-base: #f0f1f3;
 
     /* Mark & Text */
     --color-mark-bg: #014063;
@@ -515,7 +392,7 @@
 }
 
 /* ==========================================================================
-   5. Semantic Colors - Dark Theme (Explicit)
+   Semantic Colors - Dark Theme (Explicit)
    ==========================================================================
 
    Applied when data-theme="dark" is set on the root element,
@@ -580,13 +457,8 @@
   --shadow-md: 0.0625rem 0.125rem 0.5rem rgba(7, 8.5, 12, 0.15);
   --shadow-lg: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
 
-  /* Headings */
-  --color-h1: #f0f1f3;
-  --color-h2: #e0e3e7;
-  --color-h3: #c2c7d0;
-  --color-h4: #b3b9c5;
-  --color-h5: #a4acba;
-  --color-h6: #8891a4;
+  /* Headings - base color for progressive lightness via color-mix */
+  --color-heading-base: #f0f1f3;
 
   /* Mark & Text */
   --color-mark-bg: #014063;
@@ -689,7 +561,7 @@
 }
 
 /* ==========================================================================
-   6. Scoped Element Variables (from Pico Theme)
+   Scoped Element Variables (from Pico Theme)
    ==========================================================================
 
    These selectors override the global :root variables on a per-element
@@ -724,37 +596,37 @@ h6 {
 h1 {
   --font-size: 2rem;
   --line-height: 1.125;
-  --typography-spacing-top: 3rem; /* Extra top margin to separate from previous content */
+  --typography-headings-top: 3rem; /* Extra top margin to separate from previous content */
 }
 
 h2 {
   --font-size: 1.75rem;
   --line-height: 1.15;
-  --typography-spacing-top: 2.625rem;
+  --typography-headings-top: 2.625rem;
 }
 
 h3 {
   --font-size: 1.5rem;
   --line-height: 1.175;
-  --typography-spacing-top: 2.25rem;
+  --typography-headings-top: 2.25rem;
 }
 
 h4 {
   --font-size: 1.25rem;
   --line-height: 1.2;
-  --typography-spacing-top: 1.874rem;
+  --typography-headings-top: 1.874rem;
 }
 
 h5 {
   --font-size: 1.125rem;
   --line-height: 1.225;
-  --typography-spacing-top: 1.6875rem;
+  --typography-headings-top: 1.6875rem;
 }
 
 h6 {
   --font-size: 1rem;
   --line-height: 1.25;
-  --typography-spacing-top: 1.5rem;
+  --typography-headings-top: 1.5rem;
 }
 
 /* Table head/foot cells get a bolder weight and a thicker bottom border */