@semanticus/semanticus-css 0.5.1 → 0.8.0

package/src/palettes/red.css

@@ -8,7 +8,7 @@
 :root:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   --color-text-selection: rgba(240, 96, 72, 0.25);
-  --color-primary: #c52f21;
+  --color-primary-rgb: 197, 47, 33;
   --color-primary-bg: #c52f21;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(197, 47, 33, 0.5);
@@ -26,7 +26,7 @@
   :root:not([data-theme]),
   :host(:not([data-theme])) {
     --color-text-selection: rgba(243, 143, 121, 0.1875);
-    --color-primary: #f38f79;
+    --color-primary-rgb: 243, 143, 121;
     --color-primary-bg: #c52f21;
     --color-primary-border: var(--color-primary-bg);
     --color-primary-underline: rgba(243, 143, 121, 0.5);
@@ -42,7 +42,7 @@
 
 [data-theme="dark"] {
   --color-text-selection: rgba(243, 143, 121, 0.1875);
-  --color-primary: #f38f79;
+  --color-primary-rgb: 243, 143, 121;
   --color-primary-bg: #c52f21;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(243, 143, 121, 0.5);

package/src/palettes/sand.css

@@ -8,7 +8,7 @@
 :root:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   --color-text-selection: rgba(181, 157, 119, 0.25);
-  --color-primary: #6b5733;
+  --color-primary-rgb: 107, 87, 51;
   --color-primary-bg: #e6d5b8;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(107, 87, 51, 0.5);
@@ -26,7 +26,7 @@
   :root:not([data-theme]),
   :host(:not([data-theme])) {
     --color-text-selection: rgba(201, 178, 140, 0.1875);
-    --color-primary: #c9b28c;
+    --color-primary-rgb: 201, 178, 140;
     --color-primary-bg: #e6d5b8;
     --color-primary-border: var(--color-primary-bg);
     --color-primary-underline: rgba(201, 178, 140, 0.5);
@@ -42,7 +42,7 @@
 
 [data-theme="dark"] {
   --color-text-selection: rgba(201, 178, 140, 0.1875);
-  --color-primary: #c9b28c;
+  --color-primary-rgb: 201, 178, 140;
   --color-primary-bg: #e6d5b8;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(201, 178, 140, 0.5);

package/src/palettes/slate.css

@@ -8,7 +8,7 @@
 :root:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   --color-text-selection: rgba(130, 146, 170, 0.25);
-  --color-primary: #48536b;
+  --color-primary-rgb: 72, 83, 107;
   --color-primary-bg: #48536b;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(72, 83, 107, 0.5);
@@ -26,7 +26,7 @@
   :root:not([data-theme]),
   :host(:not([data-theme])) {
     --color-text-selection: rgba(159, 176, 200, 0.1875);
-    --color-primary: #9fb0c8;
+    --color-primary-rgb: 159, 176, 200;
     --color-primary-bg: #48536b;
     --color-primary-border: var(--color-primary-bg);
     --color-primary-underline: rgba(159, 176, 200, 0.5);
@@ -42,7 +42,7 @@
 
 [data-theme="dark"] {
   --color-text-selection: rgba(159, 176, 200, 0.1875);
-  --color-primary: #9fb0c8;
+  --color-primary-rgb: 159, 176, 200;
   --color-primary-bg: #48536b;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(159, 176, 200, 0.5);

package/src/palettes/violet.css

@@ -8,7 +8,7 @@
 :root:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   --color-text-selection: rgba(167, 128, 212, 0.25);
-  --color-primary: #7540bf;
+  --color-primary-rgb: 117, 64, 191;
   --color-primary-bg: #7540bf;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(117, 64, 191, 0.5);
@@ -26,7 +26,7 @@
   :root:not([data-theme]),
   :host(:not([data-theme])) {
     --color-text-selection: rgba(189, 159, 223, 0.1875);
-    --color-primary: #bd9fdf;
+    --color-primary-rgb: 189, 159, 223;
     --color-primary-bg: #7540bf;
     --color-primary-border: var(--color-primary-bg);
     --color-primary-underline: rgba(189, 159, 223, 0.5);
@@ -42,7 +42,7 @@
 
 [data-theme="dark"] {
   --color-text-selection: rgba(189, 159, 223, 0.1875);
-  --color-primary: #bd9fdf;
+  --color-primary-rgb: 189, 159, 223;
   --color-primary-bg: #7540bf;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(189, 159, 223, 0.5);

package/src/palettes/yellow.css

@@ -8,7 +8,7 @@
 :root:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   --color-text-selection: rgba(209, 188, 0, 0.25);
-  --color-primary: #8a7a00;
+  --color-primary-rgb: 138, 122, 0;
   --color-primary-bg: #fcf19c;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(138, 122, 0, 0.5);
@@ -26,7 +26,7 @@
   :root:not([data-theme]),
   :host(:not([data-theme])) {
     --color-text-selection: rgba(233, 212, 0, 0.1875);
-    --color-primary: #e9d400;
+    --color-primary-rgb: 233, 212, 0;
     --color-primary-bg: #fcf19c;
     --color-primary-border: var(--color-primary-bg);
     --color-primary-underline: rgba(233, 212, 0, 0.5);
@@ -42,7 +42,7 @@
 
 [data-theme="dark"] {
   --color-text-selection: rgba(233, 212, 0, 0.1875);
-  --color-primary: #e9d400;
+  --color-primary-rgb: 233, 212, 0;
   --color-primary-bg: #fcf19c;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(233, 212, 0, 0.5);

package/src/palettes/zinc.css

@@ -8,7 +8,7 @@
 :root:not([data-theme="dark"]),
 :host(:not([data-theme="dark"])) {
   --color-text-selection: rgba(127, 139, 158, 0.25);
-  --color-primary: #525f7a;
+  --color-primary-rgb: 82, 95, 122;
   --color-primary-bg: #525f7a;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(82, 95, 122, 0.5);
@@ -26,7 +26,7 @@
   :root:not([data-theme]),
   :host(:not([data-theme])) {
     --color-text-selection: rgba(155, 168, 189, 0.1875);
-    --color-primary: #9ba8bd;
+    --color-primary-rgb: 155, 168, 189;
     --color-primary-bg: #525f7a;
     --color-primary-border: var(--color-primary-bg);
     --color-primary-underline: rgba(155, 168, 189, 0.5);
@@ -42,7 +42,7 @@
 
 [data-theme="dark"] {
   --color-text-selection: rgba(155, 168, 189, 0.1875);
-  --color-primary: #9ba8bd;
+  --color-primary-rgb: 155, 168, 189;
   --color-primary-bg: #525f7a;
   --color-primary-border: var(--color-primary-bg);
   --color-primary-underline: rgba(155, 168, 189, 0.5);

package/src/semantics/_aside.css

@@ -1,6 +1,6 @@
 /**
- * Aside its width changes according to breakpoints (see src/variables/_shared.css),
- * its height grows to fill the available space,
+ * Aside its width changes according to certain breakpoints,
+ * and its height grows to fill the available space,
  * and stacks its children in a column with space between them (like a <nav> would).
  * In case of a single child, this child will fill the entire height.
  */

package/src/semantics/_details.css

@@ -53,7 +53,7 @@ details {
     &:focus-visible:not([role]) {
       outline: var(--outline-width) solid var(--color-primary-focus);
       outline-offset: calc(var(--spacing, 1rem) * 0.5);
-      color: var(--color-primary);
+      color: rgb(var(--color-primary-rgb));
     }
 
     &[role=button] {

package/src/semantics/_input.css

@@ -294,11 +294,11 @@ textarea {
 }
 
 :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
-  color: rgb(var(--success-rgb));
+  color: rgb(var(--color-success-rgb));
 }
 
 :where(input, select, textarea, fieldset)[aria-invalid=true] + small {
-  color: rgb(var(--danger-rgb));
+  color: rgb(var(--color-danger-rgb));
 }
 
 label > :where(input, select, textarea) {

package/src/semantics/_links.css

@@ -3,7 +3,7 @@
  */
 :where(a:not([role=button])),
 [role=link] {
-  --color-text: var(--color-primary);
+  --color-text: rgb(var(--color-primary-rgb));
   --color-background: transparent;
   --underline: var(--color-primary-underline);
   outline: none;

package/src/semantics/_progress.css

@@ -15,7 +15,7 @@ progress {
   background-color: var(--progress-bg);
   color: var(--progress-fill);
   vertical-align: baseline;
-  accent-color: var(--color-primary);
+  accent-color: rgb(var(--color-primary-rgb));
 
   &::-webkit-progress-bar {
     border-radius: var(--border-radius);

package/src/semantics/_typography.css

@@ -52,12 +52,21 @@ h6 {
   font-family: var(--font-family);
 }
 
-h1 { --color-text: var(--color-h1); }
-h2 { --color-text: var(--color-h2); }
-h3 { --color-text: var(--color-h3); }
-h4 { --color-text: var(--color-h4); }
-h5 { --color-text: var(--color-h5); }
-h6 { --color-text: var(--color-h6); }
+/* Headings - progressive lightness using color-mix */
+h1 { --color-text: var(--color-heading-base); }
+h2 { --color-text: color-mix(in srgb, var(--color-heading-base), white 12%); }
+h3 { --color-text: color-mix(in srgb, var(--color-heading-base), white 22%); }
+h4 { --color-text: color-mix(in srgb, var(--color-heading-base), white 32%); }
+h5 { --color-text: color-mix(in srgb, var(--color-heading-base), white 45%); }
+h6 { --color-text: color-mix(in srgb, var(--color-heading-base), white 55%); }
+
+/* Dark mode headings - base is lightest, mix in black for lower levels */
+[data-theme="dark"] h1 { --color-text: var(--color-heading-base); }
+[data-theme="dark"] h2 { --color-text: color-mix(in srgb, var(--color-heading-base), black 8%); }
+[data-theme="dark"] h3 { --color-text: color-mix(in srgb, var(--color-heading-base), black 18%); }
+[data-theme="dark"] h4 { --color-text: color-mix(in srgb, var(--color-heading-base), black 28%); }
+[data-theme="dark"] h5 { --color-text: color-mix(in srgb, var(--color-heading-base), black 38%); }
+[data-theme="dark"] h6 { --color-text: color-mix(in srgb, var(--color-heading-base), black 48%); }
 
 :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul, hr) ~ :is(h1, h2, h3, h4, h5, h6) {
   margin-top: var(--typography-spacing-top);
@@ -75,7 +84,7 @@ hgroup {
     margin-bottom: 0;
 
     &:not(:first-child):last-child {
-      --color-text: var(--color-text-muted);
+      color: color-mix(in srgb, var(--color-text), rgb(128, 128, 128) 70%);
       --font-weight: unset;
       font-size: 1rem;
     }
@@ -124,12 +133,12 @@ abbr[title] {
 }
 
 ins {
-  color: rgb(var(--success-rgb));
+  color: rgb(var(--color-success-rgb));
   text-decoration: none;
 }
 
 del {
-  color: rgb(var(--danger-rgb));
+  color: rgb(var(--color-danger-rgb));
 }
 
 ::selection {

package/src/semantics/index.css

@@ -1,7 +1,12 @@
-/**
- * Semanticus CSS Semantics
- * Variables + Normalize + Semantic HTML components
- * Perfect for semantic-first development without utility classes
+/*!
+ * Semanticus CSS Semantics Bundle v0.8.0 (https://semanticus.design/)
+ *
+ * Semantic-first HTML styling (no variants or utility classes)
+ *
+ * Adapted from Pico CSS (https://picocss.com)
+ * Original work: Copyright (c) 2019-2024 Pico CSS
+ * Modifications: Copyright (c) 2026 Joao Goncalves
+ * Licensed under MIT (https://github.com/semanticus/semanticus-css/blob/main/LICENSE)
  */
 
 /* Variables */

package/src/sizes/pico.css

@@ -0,0 +1,95 @@
+/* Shared variables */
+@import '../variables/_breakpoints.css';
+
+: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;
+  --responsive-multiplier: 1; /* Multiplier applied to spacing for responsive adjustments at wider breakpoints */
+  --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-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 */
+
+  --sidebar-width: 25%; /* Sidebar width */
+}
+
+/* Responsive Font Sizes – progressively increase root font-size at wider viewports */
+@media (--breakpoint-sm) {
+  :root,
+  :host {
+    --font-size: 106.25%;
+    --sidebar-width: max(25%, 150px);
+    --responsive-multiplier: 1.25;
+  }
+}
+
+@media (--breakpoint-md) {
+  :root,
+  :host {
+    --font-size: 112.5%;
+    --sidebar-width: max(22%, 180px);
+    --responsive-multiplier: 1.5;
+  }
+}
+
+@media (--breakpoint-lg) {
+  :root,
+  :host {
+    --font-size: 118.75%;
+    --sidebar-width: max(20%, 200px);
+    --responsive-multiplier: 1.75;
+  }
+}
+
+@media (--breakpoint-xl) {
+  :root,
+  :host {
+    --font-size: 125%;
+    --sidebar-width: max(18%, 220px);
+    --responsive-multiplier: 2;
+  }
+}
+
+@media (--breakpoint-xxl) {
+  :root,
+  :host {
+    --font-size: 131.25%;
+    --sidebar-width: clamp(240px, 16%, 300px);
+    --responsive-multiplier: 2.25;
+  }
+}

package/src/utilities/_variables.css

@@ -4,9 +4,6 @@
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */
 
-/* Shared variables */
-@import '../variables/_shared.css';
-
 /* ==========================================================================
    Theme-independent variables
    ========================================================================== */
@@ -18,232 +15,40 @@
 
   /* Borders & radii */
   --border-style: solid;
-  --border-radius-sm: var(--border-radius);
-  --border-radius-lg: calc(var(--border-radius) * 2);
-  --border-radius-xl: calc(var(--border-radius) * 4);
-  --border-radius-xxl: calc(var(--border-radius) * 8);
+  --border-radius-default: var(--border-radius);
+  --border-radius-sm: var(--border-radius-default);
+  --border-radius-lg: calc(var(--border-radius-default) * 2);
+  --border-radius-xl: calc(var(--border-radius-default) * 4);
+  --border-radius-xxl: calc(var(--border-radius-default) * 8);
   --border-radius-pill: 50rem;
 
   /* Border-width scale */
-  --border-width-1: var(--border-width);
-  --border-width-2: calc(var(--border-width) * 2);
-  --border-width-3: calc(var(--border-width) * 3);
-  --border-width-4: calc(var(--border-width) * 4);
-  --border-width-5: calc(var(--border-width) * 5);
+  --border-width-default: var(--border-width);
+  --border-width-0: 0;
+  --border-width-1: var(--border-width-default);
+  --border-width-2: calc(var(--border-width-default) * 2);
+  --border-width-3: calc(var(--border-width-default) * 3);
+  --border-width-4: calc(var(--border-width-default) * 4);
+  --border-width-5: calc(var(--border-width-default) * 5);
 
   /* Spacing scale */
+  --spacer-default: var(--spacing);
   --spacer-0: 0;
-  --spacer-1: calc(var(--spacing) * 0.25);
-  --spacer-2: calc(var(--spacing) * 0.5);
-  --spacer-3: var(--spacing);
-  --spacer-4: calc(var(--spacing) * 1.5);
-  --spacer-5: calc(var(--spacing) * 3);
-
-  /* Font-size scale */
-  --fs-1: calc(1.375rem + 1.5vw);
-  --fs-2: calc(1.325rem + 0.9vw);
-  --fs-3: calc(1.3rem + 0.6vw);
-  --fs-4: calc(1.275rem + 0.3vw);
-  --fs-5: 1.25rem;
-  --fs-6: 1rem;
+  --spacer-1: calc(var(--spacer-default) * 0.25);
+  --spacer-2: calc(var(--spacer-default) * 0.5);
+  --spacer-3: var(--spacer-default);
+  --spacer-4: calc(var(--spacer-default) * 1.5);
+  --spacer-5: calc(var(--spacer-default) * 3);
 
   /* Focus ring */
   --focus-ring-width: var(--outline-width);
   --focus-ring-opacity: 0.25;
 
   /* Auto-switching mappings (resolved at computed-value time via Semanticus CSS) */
-  --emphasis-color: var(--color-contrast);
+  --emphasis-color: rgb(var(--color-contrast-rgb));
   --secondary-color: var(--color-text-muted);
   --border-color: var(--color-border-muted);
-  --box-shadow: var(--shadow-md);
-  --box-shadow-sm: var(--shadow-sm);
-  --box-shadow-lg: var(--shadow-lg);
   --focus-ring-color: var(--color-primary-focus);
 
-  /* Status inverse colors (readable text on status-colored backgrounds) */
-  --color-success-inverse: #fff;
-  --color-info-inverse: #fff;
-  --color-warning-inverse: #000;
-  --color-danger-inverse: #fff;
-
   --max-z-index: 1050;
 }
-
-/* ==========================================================================
-   Light theme (default)
-   ========================================================================== */
-
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  /* RGB channels */
-  --primary-rgb: 1, 114, 173;
-  --secondary-rgb: 93, 107, 137;
-  --contrast-rgb: 24, 28, 37;
-
-  /* Text emphasis (darker/hover shades in light) */
-  --primary-text-emphasis: #015887;
-  --secondary-text-emphasis: #48536b;
-  --success-text-emphasis: #20603b;
-  --info-text-emphasis: #025d5d;
-  --warning-text-emphasis: #694d00;
-  --danger-text-emphasis: #9b2318;
-  --contrast-text-emphasis: #495057;
-
-  /* Subtle backgrounds (low opacity) */
-  --primary-bg-subtle: rgba(1, 114, 173, 0.1);
-  --secondary-bg-subtle: rgba(93, 107, 137, 0.1);
-  --success-bg-subtle: rgba(43, 122, 76, 0.1);
-  --info-bg-subtle: rgba(4, 120, 120, 0.1);
-  --warning-bg-subtle: rgba(255, 191, 0, 0.1);
-  --danger-bg-subtle: rgba(197, 47, 33, 0.1);
-  --contrast-bg-subtle: #ced4da;
-
-  /* Subtle borders (medium opacity) */
-  --primary-border-subtle: rgba(1, 114, 173, 0.35);
-  --secondary-border-subtle: rgba(93, 107, 137, 0.35);
-  --success-border-subtle: rgba(43, 122, 76, 0.35);
-  --info-border-subtle: rgba(4, 120, 120, 0.35);
-  --warning-border-subtle: rgba(255, 191, 0, 0.35);
-  --danger-border-subtle: rgba(197, 47, 33, 0.35);
-  --contrast-border-subtle: #adb5bd;
-
-  /* Body & emphasis RGB */
-  --body-color-rgb: 55, 60, 68;
-  --body-bg-rgb: 255, 255, 255;
-  --emphasis-color-rgb: 24, 28, 37;
-
-  /* Secondary surfaces */
-  --secondary-bg-rgb: 233, 236, 239;
-
-  /* Link RGB */
-  --link-color-rgb: 1, 114, 173;
-  --link-hover-color-rgb: 1, 88, 135;
-
-  /* Link hover RGB (per-variant) */
-  --secondary-hover-color-rgb: 72, 83, 107;
-  --success-hover-color-rgb: 32, 96, 59;
-  --info-hover-color-rgb: 2, 93, 93;
-  --warning-hover-color-rgb: 232, 174, 1;
-  --danger-hover-color-rgb: 155, 35, 24;
-  --contrast-hover-color-rgb: 249, 250, 251;
-}
-
-/* ==========================================================================
-   Dark theme (system preference)
-   ========================================================================== */
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    /* RGB channels */
-    --primary-rgb: 1, 170, 255;
-    --secondary-rgb: 150, 158, 175;
-    --contrast-rgb: 248, 249, 250;
-
-    /* Text emphasis (lighter/hover shades in dark) */
-    --primary-text-emphasis: #79c0ff;
-    --secondary-text-emphasis: #b3b9c5;
-    --success-text-emphasis: #93deb5;
-    --info-text-emphasis: #25dddd;
-    --warning-text-emphasis: #e8ae01;
-    --danger-text-emphasis: #f5b7a8;
-    --contrast-text-emphasis: #f8f9fa;
-
-    /* Subtle backgrounds */
-    --primary-bg-subtle: rgba(1, 170, 255, 0.15);
-    --secondary-bg-subtle: rgba(150, 158, 175, 0.15);
-    --success-bg-subtle: rgba(110, 213, 157, 0.15);
-    --info-bg-subtle: rgba(10, 194, 194, 0.15);
-    --warning-bg-subtle: rgba(255, 191, 0, 0.15);
-    --danger-bg-subtle: rgba(243, 143, 121, 0.15);
-    --contrast-bg-subtle: #2a3140;
-
-    /* Subtle borders */
-    --primary-border-subtle: rgba(1, 170, 255, 0.35);
-    --secondary-border-subtle: rgba(150, 158, 175, 0.35);
-    --success-border-subtle: rgba(110, 213, 157, 0.35);
-    --info-border-subtle: rgba(10, 194, 194, 0.35);
-    --warning-border-subtle: rgba(255, 191, 0, 0.35);
-    --danger-border-subtle: rgba(243, 143, 121, 0.35);
-    --contrast-border-subtle: #2a3140;
-
-    /* Body & emphasis RGB */
-    --body-color-rgb: 194, 199, 208;
-    --body-bg-rgb: 19, 23, 31;
-    --emphasis-color-rgb: 223, 227, 235;
-
-    /* Secondary surfaces */
-    --secondary-bg-rgb: 42, 49, 64;
-
-    /* Link RGB */
-    --link-color-rgb: 1, 170, 255;
-    --link-hover-color-rgb: 121, 192, 255;
-
-    /* Link hover RGB (per-variant) */
-    --secondary-hover-color-rgb: 179, 185, 197;
-    --success-hover-color-rgb: 147, 222, 181;
-    --info-hover-color-rgb: 37, 221, 221;
-    --warning-hover-color-rgb: 232, 174, 1;
-    --danger-hover-color-rgb: 245, 183, 168;
-    --contrast-hover-color-rgb: 255, 255, 255;
-  }
-}
-
-/* ==========================================================================
-   Dark theme (explicit)
-   ========================================================================== */
-
-[data-theme="dark"] {
-  /* RGB channels */
-  --primary-rgb: 1, 170, 255;
-  --secondary-rgb: 150, 158, 175;
-  --contrast-rgb: 248, 249, 250;
-
-  /* Text emphasis (lighter/hover shades in dark) */
-  --primary-text-emphasis: #79c0ff;
-  --secondary-text-emphasis: #b3b9c5;
-  --success-text-emphasis: #93deb5;
-  --info-text-emphasis: #25dddd;
-  --warning-text-emphasis: #e8ae01;
-  --danger-text-emphasis: #f5b7a8;
-  --contrast-text-emphasis: #f8f9fa;
-
-  /* Subtle backgrounds */
-  --primary-bg-subtle: rgba(1, 170, 255, 0.15);
-  --secondary-bg-subtle: rgba(150, 158, 175, 0.15);
-  --success-bg-subtle: rgba(110, 213, 157, 0.15);
-  --info-bg-subtle: rgba(10, 194, 194, 0.15);
-  --warning-bg-subtle: rgba(255, 191, 0, 0.15);
-  --danger-bg-subtle: rgba(243, 143, 121, 0.15);
-  --contrast-bg-subtle: #2a3140;
-
-  /* Subtle borders */
-  --primary-border-subtle: rgba(1, 170, 255, 0.35);
-  --secondary-border-subtle: rgba(150, 158, 175, 0.35);
-  --success-border-subtle: rgba(110, 213, 157, 0.35);
-  --info-border-subtle: rgba(10, 194, 194, 0.35);
-  --warning-border-subtle: rgba(255, 191, 0, 0.35);
-  --danger-border-subtle: rgba(243, 143, 121, 0.35);
-  --contrast-border-subtle: #2a3140;
-
-  /* Body & emphasis RGB */
-  --body-color-rgb: 194, 199, 208;
-  --body-bg-rgb: 19, 23, 31;
-  --emphasis-color-rgb: 223, 227, 235;
-
-  /* Secondary surfaces */
-  --secondary-bg-rgb: 42, 49, 64;
-
-  /* Link RGB */
-  --link-color-rgb: 1, 170, 255;
-  --link-hover-color-rgb: 121, 192, 255;
-
-  /* Link hover RGB (per-variant) */
-  --secondary-hover-color-rgb: 179, 185, 197;
-  --success-hover-color-rgb: 147, 222, 181;
-  --info-hover-color-rgb: 37, 221, 221;
-  --warning-hover-color-rgb: 232, 174, 1;
-  --danger-hover-color-rgb: 245, 183, 168;
-  --contrast-hover-color-rgb: 255, 255, 255;
-}