@semanticus/semanticus-css 0.7.0 → 0.9.0

package/src/variables/_all.css

@@ -1,746 +1,22 @@
-/*
-
-   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
-
-*/
-
-@import './_shared.css';
-
-/* ==========================================================================
-   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 - 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> */
-  --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);
-}
-
-/* ==========================================================================
-   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 - base color for progressive lightness via color-mix */
-    --color-heading-base: #f0f1f3;
-
-    /* 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);
-  }
-}
-
 /* ==========================================================================
-   Semantic Colors - Dark Theme (Explicit)
+   Semanticus CSS Variables
    ==========================================================================
 
-   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 - base color for progressive lightness via color-mix */
-  --color-heading-base: #f0f1f3;
-
-  /* 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");
-}
+   This file imports all CSS custom properties used throughout the framework.
+   The import order matches the original _all.css to ensure proper cascade:
 
-/* 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);
-}
-
-/* ==========================================================================
-   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-headings-top: 3rem; /* Extra top margin to separate from previous content */
-}
-
-h2 {
-  --font-size: 1.75rem;
-  --line-height: 1.15;
-  --typography-headings-top: 2.625rem;
-}
-
-h3 {
-  --font-size: 1.5rem;
-  --line-height: 1.175;
-  --typography-headings-top: 2.25rem;
-}
-
-h4 {
-  --font-size: 1.25rem;
-  --line-height: 1.2;
-  --typography-headings-top: 1.874rem;
-}
-
-h5 {
-  --font-size: 1.125rem;
-  --line-height: 1.225;
-  --typography-headings-top: 1.6875rem;
-}
-
-h6 {
-  --font-size: 1rem;
-  --line-height: 1.25;
-  --typography-headings-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
-   ==========================================================================
+   1. _breakpoints.css  - Responsive breakpoint custom media queries
+   2. _layout.css       - --transparent, typography, spacing, sizing
+   3. _colors.css       - Color palette, light/dark theme colors
+   4. _components.css   - Component-specific variables (buttons, forms, etc.)
+   5. _icons.css        - SVG icon data-URIs
+   6. _elements.css     - Element-scoped variable overrides
 
-   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);
-}
+@import './_breakpoints.css';
+@import './_layout.css';
+@import './_colors.css';
+@import './_components.css';
+@import './_icons.css';
+@import './_elements.css';