@semanticus/semanticus-css 0.3.0

package/src/_variables.css

@@ -0,0 +1,863 @@
+/*
+
+   Consolidated Theme Variables
+   ============================
+
+   This file defines the semantic theme variables for Semanticus CSS.
+   - Semantic colors: Theme-aware variables for light/dark modes using
+     --color-primary, --color-secondary, and --color-contrast roles
+   - Layout variables: Typography, spacing, and component sizing
+
+*/
+
+/* ==========================================================================
+   1. Base Tokens
+   ========================================================================== */
+
+:root {
+  --transparent: transparent;
+}
+
+/* ==========================================================================
+   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 (min-width: 576px) {
+  :root,
+  :host {
+    --font-size: 106.25%;
+  }
+}
+
+@media (min-width: 768px) {
+  :root,
+  :host {
+    --font-size: 112.5%;
+  }
+}
+
+@media (min-width: 1024px) {
+  :root,
+  :host {
+    --font-size: 118.75%;
+  }
+}
+
+@media (min-width: 1280px) {
+  :root,
+  :host {
+    --font-size: 125%;
+  }
+}
+
+@media (min-width: 1536px) {
+  :root,
+  :host {
+    --font-size: 131.25%;
+  }
+}
+
+/* ==========================================================================
+   3. Semantic Colors - Light Theme (Default)
+   ==========================================================================
+
+   Color variable naming convention used throughout sections 3–5:
+
+     --color-{role}           Text color for links, buttons, and inline elements
+     --color-{role}-bg        Background fill (e.g. button backgrounds)
+     --color-{role}-border    Border color (usually matches -bg)
+     --color-{role}-underline Semi-transparent underline for links
+     --color-{role}-hover     Text color on hover
+     --color-{role}-hover-bg  Background on hover
+     --color-{role}-focus     Semi-transparent focus ring / outline color
+     --color-{role}-inverse   Text on top of the filled -bg (e.g. white text on a colored button)
+
+   Roles: primary (brand CTA), secondary (neutral actions), contrast (high-emphasis)
+   ========================================================================== */
+
+[data-theme="light"],
+:root:not([data-theme="dark"]),
+:host(:not([data-theme="dark"])) {
+  color-scheme: light;
+
+  /* Status Colors */
+  --success-rgb: 43, 122, 76;
+  --info-rgb: 4, 120, 120;
+  --warning-rgb: 255, 191, 0;
+  --danger-rgb: 197, 47, 33;
+
+  /* Core Colors – page-level background, body text, and text selection highlight */
+  --color-background: #fff;
+  --color-text: #373c44;
+  --color-text-selection: rgba(2, 154, 232, 0.25); /* Highlight color when the user selects text */
+  --color-text-muted: #646b79; /* Subdued text for captions, hints, and secondary information */
+  --color-border-muted: rgb(231, 234, 239.5); /* Subtle border for dividers, table rows, and card edges */
+
+  /* Primary */
+  --color-primary: #0172ad;
+  --color-primary-bg: #0172ad;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(1, 114, 173, 0.5);
+  --color-primary-hover: #015887;
+  --color-primary-hover-bg: #02659a;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(2, 154, 232, 0.5);
+  --color-primary-inverse: #fff;
+
+  /* Secondary */
+  --color-secondary: #5d6b89;
+  --color-secondary-bg: #525f7a;
+  --color-secondary-border: var(--color-secondary-bg);
+  --color-secondary-underline: rgba(93, 107, 137, 0.5);
+  --color-secondary-hover: #48536b;
+  --color-secondary-hover-bg: #48536b;
+  --color-secondary-hover-border: var(--color-secondary-hover-bg);
+  --color-secondary-hover-underline: var(--color-secondary-hover);
+  --color-secondary-focus: rgba(93, 107, 137, 0.25);
+  --color-secondary-inverse: #fff;
+
+  /* Contrast */
+  --color-contrast: #181c25;
+  --color-contrast-bg: #181c25;
+  --color-contrast-border: var(--color-contrast-bg);
+  --color-contrast-underline: rgba(24, 28, 37, 0.5);
+  --color-contrast-hover: #000;
+  --color-contrast-hover-bg: #000;
+  --color-contrast-hover-border: var(--color-contrast-hover-bg);
+  --color-contrast-hover-underline: var(--color-contrast-hover);
+  --color-contrast-focus: rgba(93, 107, 137, 0.25);
+  --color-contrast-inverse: #fff;
+
+  /* Shadows – elevation levels used by cards, dropdowns, and other floating UI */
+  --shadow-sm: 0 0.0625rem 0.125rem rgba(129, 145, 181, 0.1); /* Subtle lift – e.g. buttons */
+  --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;
+
+  /* Mark & Text – colors for <mark>, <ins>, and <del> elements */
+  --color-mark-bg: rgb(252.5, 230.5, 191.5); /* Background highlight for <mark> */
+  --color-mark-text: #0f1114; /* Text color inside <mark> */
+
+  /* Blockquote */
+  --blockquote-border-color: var(--color-border-muted);
+  --blockquote-footer-color: var(--color-text-muted);
+
+  /* Button – box-shadow values for resting and hovered states */
+  --button-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  --button-shadow-hover: 0 0 0 rgba(0, 0, 0, 0);
+
+  /* Table – border and striped-row styling */
+  --table-border-color: var(--color-border-muted);
+  --table-row-stripe-bg: rgba(111, 120, 135, 0.0375); /* Background for alternating (striped) table rows */
+
+  /* Code – styling for <code>, <pre>, and <kbd> elements */
+  --color-code-bg: rgb(243, 244.5, 246.75); /* Background for inline <code> and <pre> blocks */
+  --color-code-text: #646b79; /* Text color inside code blocks */
+  --color-kbd-bg: var(--color-text); /* Background for <kbd> (keyboard key) elements */
+  --color-kbd-text: var(--color-background); /* Text color for <kbd> elements */
+
+  /* Form Elements – colors and state variants for inputs, selects, and textareas */
+  --form-bg: rgb(251, 251.5, 252.25); /* Default background */
+  --form-selected-bg: #dfe3eb; /* Background when an option is selected (e.g. <select>) */
+  --form-border-color: #cfd5e2;
+  --form-text-color: #23262c;
+  --form-placeholder-color: var(--color-text-muted); /* Placeholder text color */
+  --form-active-bg: #fff; /* Background when the field is focused / active */
+  --form-active-border: var(--color-primary-border); /* Border when focused */
+  --form-focus: var(--color-primary-border); /* Focus ring color */
+  --form-disabled-opacity: 0.5; /* Opacity applied to disabled form elements */
+  --form-invalid-border: rgb(var(--danger-rgb)); /* Border for invalid fields (idle) */
+  --form-invalid-active-border: rgb(var(--danger-rgb)); /* Border for invalid fields (focused) */
+  --form-invalid-focus: rgba(var(--danger-rgb), 0.5); /* Focus ring for invalid fields */
+  --form-valid-border: rgb(var(--success-rgb)); /* Border for valid fields (idle) */
+  --form-valid-active-border: rgb(var(--success-rgb)); /* Border for valid fields (focused) */
+  --form-valid-focus: rgba(var(--success-rgb), 0.5); /* Focus ring for valid fields */
+
+  /* Switch – toggle switch component (checkbox[role="switch"]) */
+  --switch-bg: #bfc7d9; /* Track background (unchecked) */
+  --switch-checked-bg: var(--color-primary-bg); /* Track background (checked) */
+  --switch-thumb-color: #fff; /* Thumb (knob) color */
+  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Shadow on the thumb */
+
+  /* Range – <input type="range"> slider */
+  --range-border-color: #dfe3eb; /* Track border */
+  --range-active-border: #bfc7d9; /* Track border when active */
+  --range-thumb-border: var(--color-background); /* Border around the draggable thumb */
+  --range-thumb-color: var(--color-secondary-bg); /* Thumb fill color */
+  --range-thumb-active: var(--color-primary-bg); /* Thumb fill when actively dragging */
+
+  /* Accordion – <details> disclosure component */
+  --accordion-border: var(--color-border-muted);
+  --accordion-active-summary: var(--color-primary-hover); /* <summary> color while clicking */
+  --accordion-closed-summary: var(--color-text); /* <summary> color when accordion is closed */
+  --accordion-open-summary: var(--color-text-muted); /* <summary> color when accordion is open */
+
+  /* Card – container component for grouped content */
+  --card-bg: var(--color-background);
+  --card-border: var(--color-border-muted);
+  --card-shadow: var(--shadow-lg);
+  --card-section-bg: rgb(251, 251.5, 252.25); /* Background for header/footer sections inside a card */
+
+  /* Dropdown – flyout menu triggered by a <details> or button */
+  --dropdown-bg: #fff;
+  --dropdown-border: #eff1f4;
+  --dropdown-shadow: var(--shadow-lg);
+  --dropdown-text: var(--color-text);
+  --dropdown-hover-bg: #eff1f4; /* Background for the hovered item in the dropdown list */
+
+  /* Loading & Modal – overlay and spinner appearance */
+  --loading-spinner-opacity: 0.5; /* Opacity of the loading spinner icon */
+  --modal-overlay-bg: rgba(232, 234, 237, 0.75); /* Semi-transparent backdrop behind open modals */
+
+  /* Progress – <progress> bar styling */
+  --progress-bg: #dfe3eb; /* Track (empty) background */
+  --progress-fill: var(--color-primary-bg); /* Filled portion color */
+
+  /* Tooltip – floating label shown on [role="tooltip"] hover */
+  --tooltip-bg: var(--color-contrast-bg);
+  --tooltip-text: var(--color-contrast-inverse);
+
+  /* Icons – theme-aware validation icons (stroke color adapts to the theme) */
+  --icon-valid: 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(43, 122, 76)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); /* Checkmark shown on valid form fields */
+  --icon-invalid: 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(197, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); /* Warning icon shown on invalid form fields */
+}
+
+/*
+ * Override --form-focus to use the primary focus ring for actionable input types
+ * (submit, button, reset, checkbox, radio, file) in light mode.
+ * These inputs use a broader ring rather than the subtle 1px form focus.
+ */
+[data-theme="light"] input:is(
+    [type="submit"],
+    [type="button"],
+    [type="reset"],
+    [type="checkbox"],
+    [type="radio"],
+    [type="file"]
+  ),
+:root:not([data-theme="dark"]) input:is(
+    [type="submit"],
+    [type="button"],
+    [type="reset"],
+    [type="checkbox"],
+    [type="radio"],
+    [type="file"]
+  ),
+:host(:not([data-theme="dark"])) input:is(
+    [type="submit"],
+    [type="button"],
+    [type="reset"],
+    [type="checkbox"],
+    [type="radio"],
+    [type="file"]
+  ) {
+  --form-focus: var(--color-primary-focus);
+}
+
+/* ==========================================================================
+   4. Semantic Colors - Dark Theme (System Preference)
+   ==========================================================================
+
+   Applied when the user's OS is set to dark mode AND no explicit
+   data-theme attribute is present. Mirrors the variable structure
+   from §3 with adjusted values for dark backgrounds.
+   ========================================================================== */
+
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
+    color-scheme: dark;
+
+    /* Status Colors */
+    --success-rgb: 110, 213, 157;
+    --info-rgb: 10, 194, 194;
+    --warning-rgb: 255, 191, 0;
+    --danger-rgb: 243, 143, 121;
+
+    /* Core Colors */
+    --color-background: rgb(19, 22.5, 30.5);
+    --color-text: #c2c7d0;
+    --color-text-selection: rgba(1, 170, 255, 0.1875);
+    --color-text-muted: #7b8495;
+    --color-border-muted: #202632;
+
+    /* Primary */
+    --color-primary: #01aaff;
+    --color-primary-bg: #0172ad;
+    --color-primary-border: var(--color-primary-bg);
+    --color-primary-underline: rgba(1, 170, 255, 0.5);
+    --color-primary-hover: #79c0ff;
+    --color-primary-hover-bg: #017fc0;
+    --color-primary-hover-border: var(--color-primary-hover-bg);
+    --color-primary-hover-underline: var(--color-primary-hover);
+    --color-primary-focus: rgba(1, 170, 255, 0.375);
+    --color-primary-inverse: #fff;
+
+    /* Secondary */
+    --color-secondary: #969eaf;
+    --color-secondary-bg: #525f7a;
+    --color-secondary-border: var(--color-secondary-bg);
+    --color-secondary-underline: rgba(150, 158, 175, 0.5);
+    --color-secondary-hover: #b3b9c5;
+    --color-secondary-hover-bg: #5d6b89;
+    --color-secondary-hover-border: var(--color-secondary-hover-bg);
+    --color-secondary-hover-underline: var(--color-secondary-hover);
+    --color-secondary-focus: rgba(144, 158, 190, 0.25);
+    --color-secondary-inverse: #fff;
+
+    /* Contrast */
+    --color-contrast: #dfe3eb;
+    --color-contrast-bg: #eff1f4;
+    --color-contrast-border: var(--color-contrast-bg);
+    --color-contrast-underline: rgba(223, 227, 235, 0.5);
+    --color-contrast-hover: #fff;
+    --color-contrast-hover-bg: #fff;
+    --color-contrast-hover-border: var(--color-contrast-hover-bg);
+    --color-contrast-hover-underline: var(--color-contrast-hover);
+    --color-contrast-focus: rgba(207, 213, 226, 0.25);
+    --color-contrast-inverse: #000;
+
+    /* Shadows */
+    --shadow-sm: 0 0.0625rem 0.125rem rgba(7, 8.5, 12, 0.1);
+    --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;
+
+    /* Mark & Text */
+    --color-mark-bg: #014063;
+    --color-mark-text: #fff;
+
+    /* Blockquote */
+    --blockquote-border-color: var(--color-border-muted);
+    --blockquote-footer-color: var(--color-text-muted);
+
+    /* Button */
+    --button-shadow: 0 0 0 rgba(0, 0, 0, 0);
+    --button-shadow-hover: 0 0 0 rgba(0, 0, 0, 0);
+
+    /* Table */
+    --table-border-color: var(--color-border-muted);
+    --table-row-stripe-bg: rgba(111, 120, 135, 0.0375);
+
+    /* Code */
+    --color-code-bg: rgb(26, 30.5, 40.25);
+    --color-code-text: #8891a4;
+    --color-kbd-bg: var(--color-text);
+    --color-kbd-text: var(--color-background);
+
+    /* Form Elements */
+    --form-bg: rgb(28, 33, 43.5);
+    --form-selected-bg: #2a3140;
+    --form-border-color: #2a3140;
+    --form-text-color: #e0e3e7;
+    --form-placeholder-color: #8891a4;
+    --form-active-bg: rgb(26, 30.5, 40.25);
+    --form-active-border: var(--color-primary-border);
+    --form-focus: var(--color-primary-border);
+    --form-disabled-opacity: 0.5;
+    --form-invalid-border: rgb(var(--danger-rgb));
+    --form-invalid-active-border: rgb(var(--danger-rgb));
+    --form-invalid-focus: rgba(var(--danger-rgb), 0.5);
+    --form-valid-border: rgb(var(--success-rgb));
+    --form-valid-active-border: rgb(var(--success-rgb));
+    --form-valid-focus: rgba(var(--success-rgb), 0.5);
+
+    /* Switch */
+    --switch-bg: #333c4e;
+    --switch-checked-bg: var(--color-primary-bg);
+    --switch-thumb-color: #fff;
+    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+
+    /* Range */
+    --range-border-color: #202632;
+    --range-active-border: #2a3140;
+    --range-thumb-border: var(--color-background);
+    --range-thumb-color: var(--color-secondary-bg);
+    --range-thumb-active: var(--color-primary-bg);
+
+    /* Accordion */
+    --accordion-border: var(--color-border-muted);
+    --accordion-active-summary: var(--color-primary-hover);
+    --accordion-closed-summary: var(--color-text);
+    --accordion-open-summary: var(--color-text-muted);
+
+    /* Card */
+    --card-bg: #181c25;
+    --card-border: var(--card-bg);
+    --card-shadow: var(--shadow-lg);
+    --card-section-bg: rgb(26, 30.5, 40.25);
+
+    /* Dropdown */
+    --dropdown-bg: #181c25;
+    --dropdown-border: #202632;
+    --dropdown-shadow: var(--shadow-lg);
+    --dropdown-text: var(--color-text);
+    --dropdown-hover-bg: #202632;
+
+    /* Loading & Modal */
+    --loading-spinner-opacity: 0.5;
+    --modal-overlay-bg: rgba(7.5, 8.5, 10, 0.75);
+
+    /* Progress */
+    --progress-bg: #202632;
+    --progress-fill: var(--color-primary-bg);
+
+    /* Tooltip */
+    --tooltip-bg: var(--color-contrast-bg);
+    --tooltip-text: var(--color-contrast-inverse);
+
+    /* Icons */
+    --icon-valid: 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(110, 213, 157)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    --icon-invalid: 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(243, 143, 121)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+  }
+
+  :root:not([data-theme]) input:is(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="checkbox"],
+      [type="radio"],
+      [type="file"]
+    ),
+  :host(:not([data-theme])) input:is(
+      [type="submit"],
+      [type="button"],
+      [type="reset"],
+      [type="checkbox"],
+      [type="radio"],
+      [type="file"]
+    ) {
+    --form-focus: var(--color-primary-focus);
+  }
+}
+
+/* ==========================================================================
+   5. Semantic Colors - Dark Theme (Explicit)
+   ==========================================================================
+
+   Applied when data-theme="dark" is set on the root element,
+   regardless of OS preference. Contains the same variable overrides
+   as §4 so both explicit and system-preference dark mode look identical.
+   ========================================================================== */
+
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  /* Status Colors */
+  --success-rgb: 110, 213, 157;
+  --info-rgb: 10, 194, 194;
+  --warning-rgb: 255, 191, 0;
+  --danger-rgb: 243, 143, 121;
+
+  /* Core Colors */
+  --color-background: rgb(19, 22.5, 30.5);
+  --color-text: #c2c7d0;
+  --color-text-selection: rgba(1, 170, 255, 0.1875);
+  --color-text-muted: #7b8495;
+  --color-border-muted: #202632;
+
+  /* Primary */
+  --color-primary: #01aaff;
+  --color-primary-bg: #0172ad;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(1, 170, 255, 0.5);
+  --color-primary-hover: #79c0ff;
+  --color-primary-hover-bg: #017fc0;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(1, 170, 255, 0.375);
+  --color-primary-inverse: #fff;
+
+  /* Secondary */
+  --color-secondary: #969eaf;
+  --color-secondary-bg: #525f7a;
+  --color-secondary-border: var(--color-secondary-bg);
+  --color-secondary-underline: rgba(150, 158, 175, 0.5);
+  --color-secondary-hover: #b3b9c5;
+  --color-secondary-hover-bg: #5d6b89;
+  --color-secondary-hover-border: var(--color-secondary-hover-bg);
+  --color-secondary-hover-underline: var(--color-secondary-hover);
+  --color-secondary-focus: rgba(144, 158, 190, 0.25);
+  --color-secondary-inverse: #fff;
+
+  /* Contrast */
+  --color-contrast: #dfe3eb;
+  --color-contrast-bg: #eff1f4;
+  --color-contrast-border: var(--color-contrast-bg);
+  --color-contrast-underline: rgba(223, 227, 235, 0.5);
+  --color-contrast-hover: #fff;
+  --color-contrast-hover-bg: #fff;
+  --color-contrast-hover-border: var(--color-contrast-hover-bg);
+  --color-contrast-hover-underline: var(--color-contrast-hover);
+  --color-contrast-focus: rgba(207, 213, 226, 0.25);
+  --color-contrast-inverse: #000;
+
+  /* Shadows */
+  --shadow-sm: 0 0.0625rem 0.125rem rgba(7, 8.5, 12, 0.1);
+  --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;
+
+  /* Mark & Text */
+  --color-mark-bg: #014063;
+  --color-mark-text: #fff;
+
+  /* Blockquote */
+  --blockquote-border-color: var(--color-border-muted);
+  --blockquote-footer-color: var(--color-text-muted);
+
+  /* Button */
+  --button-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  --button-shadow-hover: 0 0 0 rgba(0, 0, 0, 0);
+
+  /* Table */
+  --table-border-color: var(--color-border-muted);
+  --table-row-stripe-bg: rgba(111, 120, 135, 0.0375);
+
+  /* Code */
+  --color-code-bg: rgb(26, 30.5, 40.25);
+  --color-code-text: #8891a4;
+  --color-kbd-bg: var(--color-text);
+  --color-kbd-text: var(--color-background);
+
+  /* Form Elements */
+  --form-bg: rgb(28, 33, 43.5);
+  --form-selected-bg: #2a3140;
+  --form-border-color: #2a3140;
+  --form-text-color: #e0e3e7;
+  --form-placeholder-color: #8891a4;
+  --form-active-bg: rgb(26, 30.5, 40.25);
+  --form-active-border: var(--color-primary-border);
+  --form-focus: var(--color-primary-border);
+  --form-disabled-opacity: 0.5;
+  --form-invalid-border: rgb(var(--danger-rgb));
+  --form-invalid-active-border: rgb(var(--danger-rgb));
+  --form-invalid-focus: rgba(var(--danger-rgb), 0.5);
+  --form-valid-border: rgb(var(--success-rgb));
+  --form-valid-active-border: rgb(var(--success-rgb));
+  --form-valid-focus: rgba(var(--success-rgb), 0.5);
+
+  /* Switch */
+  --switch-bg: #333c4e;
+  --switch-checked-bg: var(--color-primary-bg);
+  --switch-thumb-color: #fff;
+  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+
+  /* Range */
+  --range-border-color: #202632;
+  --range-active-border: #2a3140;
+  --range-thumb-border: var(--color-background);
+  --range-thumb-color: var(--color-secondary-bg);
+  --range-thumb-active: var(--color-primary-bg);
+
+  /* Accordion */
+  --accordion-border: var(--color-border-muted);
+  --accordion-active-summary: var(--color-primary-hover);
+  --accordion-closed-summary: var(--color-text);
+  --accordion-open-summary: var(--color-text-muted);
+
+  /* Card */
+  --card-bg: #181c25;
+  --card-border: var(--card-bg);
+  --card-shadow: var(--shadow-lg);
+  --card-section-bg: rgb(26, 30.5, 40.25);
+
+  /* Dropdown */
+  --dropdown-bg: #181c25;
+  --dropdown-border: #202632;
+  --dropdown-shadow: var(--shadow-lg);
+  --dropdown-text: var(--color-text);
+  --dropdown-hover-bg: #202632;
+
+  /* Loading & Modal */
+  --loading-spinner-opacity: 0.5;
+  --modal-overlay-bg: rgba(7.5, 8.5, 10, 0.75);
+
+  /* Progress */
+  --progress-bg: #202632;
+  --progress-fill: var(--color-primary-bg);
+
+  /* Tooltip */
+  --tooltip-bg: var(--color-contrast-bg);
+  --tooltip-text: var(--color-contrast-inverse);
+
+  /* Icons */
+  --icon-valid: 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(110, 213, 157)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-invalid: 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(243, 143, 121)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+}
+
+/* Same actionable-input focus override as §3, applied for explicit dark mode */
+[data-theme="dark"] input:is(
+    [type="submit"],
+    [type="button"],
+    [type="reset"],
+    [type="checkbox"],
+    [type="radio"],
+    [type="file"]
+  ) {
+  --form-focus: var(--color-primary-focus);
+}
+
+/* ==========================================================================
+   6. Scoped Element Variables (from Pico Theme)
+   ==========================================================================
+
+   These selectors override the global :root variables on a per-element
+   basis so each component can have its own defaults (font-size, weight,
+   line-height, border-radius, etc.) without class-name bloat.
+   ========================================================================== */
+
+/* Links get an underline by default */
+a {
+  --text-decoration: underline;
+}
+
+a.secondary,
+a.contrast {
+  --text-decoration: underline;
+}
+
+small {
+  --font-size: 0.875em;
+}
+
+/* Heading typography – per-level sizing and vertical spacing above each heading */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  --font-weight: 700;
+}
+
+h1 {
+  --font-size: 2rem;
+  --line-height: 1.125;
+  --typography-spacing-top: 3rem; /* Extra top margin to separate from previous content */
+}
+
+h2 {
+  --font-size: 1.75rem;
+  --line-height: 1.15;
+  --typography-spacing-top: 2.625rem;
+}
+
+h3 {
+  --font-size: 1.5rem;
+  --line-height: 1.175;
+  --typography-spacing-top: 2.25rem;
+}
+
+h4 {
+  --font-size: 1.25rem;
+  --line-height: 1.2;
+  --typography-spacing-top: 1.874rem;
+}
+
+h5 {
+  --font-size: 1.125rem;
+  --line-height: 1.225;
+  --typography-spacing-top: 1.6875rem;
+}
+
+h6 {
+  --font-size: 1rem;
+  --line-height: 1.25;
+  --typography-spacing-top: 1.5rem;
+}
+
+/* Table head/foot cells get a bolder weight and a thicker bottom border */
+thead th,
+thead td,
+tfoot th,
+tfoot td {
+  --font-weight: 600;
+  --border-width: 0.1875rem;
+}
+
+pre,
+code,
+kbd,
+samp {
+  --font-family: var(--font-family-monospace);
+}
+
+kbd {
+  --font-weight: bolder;
+}
+
+/* Text-style form inputs use a thinner outline to distinguish from buttons */
+input:not(
+    [type="submit"],
+    [type="button"],
+    [type="reset"],
+    [type="checkbox"],
+    [type="radio"],
+    [type="file"]
+  ),
+:where(select, textarea) {
+  --outline-width: 0.0625rem;
+}
+
+/* Pill-shaped border-radius for search inputs */
+[type="search"] {
+  --border-radius: 5rem;
+}
+
+/* Checkboxes & radios use a slightly thicker border than text inputs */
+[type="checkbox"],
+[type="radio"] {
+  --border-width: 0.125rem;
+}
+
+/* Toggle switches get an even thicker border for visual prominence */
+[type="checkbox"][role="switch"] {
+  --border-width: 0.1875rem;
+}
+
+/* Pill-shaped border-radius for [role="search"] wrappers */
+[role="search"] {
+  --border-radius: 5rem;
+}
+
+/*
+ * Focus ring overrides for grouped buttons:
+ * When a .secondary or .contrast button inside a [role="search"] or
+ * [role="group"] receives focus, the group ring matches that variant's
+ * focus color instead of the default primary.
+ */
+[role="search"]:has(
+    button.secondary:focus,
+    [type="submit"].secondary:focus,
+    [type="button"].secondary:focus,
+    [role="button"].secondary:focus
+  ),
+[role="group"]:has(
+    button.secondary:focus,
+    [type="submit"].secondary:focus,
+    [type="button"].secondary:focus,
+    [role="button"].secondary:focus
+  ) {
+  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-secondary-focus);
+}
+
+[role="search"]:has(
+    button.contrast:focus,
+    [type="submit"].contrast:focus,
+    [type="button"].contrast:focus,
+    [role="button"].contrast:focus
+  ),
+[role="group"]:has(
+    button.contrast:focus,
+    [type="submit"].contrast:focus,
+    [type="button"].contrast:focus,
+    [role="button"].contrast:focus
+  ) {
+  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-contrast-focus);
+}
+
+/* Buttons inside search/group combos get wider horizontal padding */
+[role="search"] button,
+[role="search"] [type="submit"],
+[role="search"] [type="button"],
+[role="search"] [role="button"],
+[role="group"] button,
+[role="group"] [type="submit"],
+[role="group"] [type="button"],
+[role="group"] [role="button"] {
+  --form-element-spacing-horizontal: 2rem;
+}
+
+/* ==========================================================================
+   7. Form Element Accent Color
+   ==========================================================================
+
+   Sets the native browser accent-color for checkboxes, radios, and range
+   sliders so they match the primary brand color without needing custom styling.
+   ========================================================================== */
+
+[type="checkbox"],
+[type="radio"],
+[type="range"] {
+  accent-color: var(--color-primary);
+}