@motion-proto/live-tokens 0.5.0 → 0.6.0

package/README.md

@@ -127,13 +127,56 @@ The components carry their own design-token aliases (declared inside each `.svel
 
 ### Styles
 
+Editor chrome (`ui-editor.css`, `ui-form-controls.css`) and the icon font are
+**auto-loaded by the editor pages themselves**; you don't import them. The
+only stylesheet a consumer needs is a `tokens.css` declaring the design-token
+CSS variables on `:root`.
+
+You can use the package's default as a starting point:
+
+```ts
+import '@motion-proto/live-tokens/starter/tokens.css';
+import '@motion-proto/live-tokens/starter/site.css';   // optional: themed h1/p/a styles
+import '@motion-proto/live-tokens/starter/fonts.css';  // optional: Fraunces + Manrope @font-face
+```
+
+…or copy `node_modules/@motion-proto/live-tokens/src/styles/tokens.css` into
+your project and edit. The editor will seed `themes/default.json` on first
+run and you can promote your edits back into the file.
+
+## Consuming live-tokens from scratch
+
+The minimum a consumer needs after `npm install @motion-proto/live-tokens`:
+
+```ts
+// src/main.ts
+import '@motion-proto/live-tokens/starter/tokens.css';
+import { mount } from 'svelte';
+import App from './App.svelte';
+
+mount(App, { target: document.getElementById('app')! });
+```
+
+```svelte
+<!-- src/App.svelte -->
+<script lang="ts">
+  import Editor from '@motion-proto/live-tokens/editor';
+</script>
+
+<Editor />
+```
+
 ```ts
-import '@motion-proto/live-tokens/styles/ui-editor.css';
-import '@motion-proto/live-tokens/styles/form-controls.css';
-import '@motion-proto/live-tokens/styles/fonts.css';
+// vite.config.ts
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+export default defineConfig({
+  plugins: [svelte()],
+});
 ```
 
-You'll also need your own `src/styles/tokens.css` declaring your design tokens as CSS variables on `:root`. Start from the package's default (`node_modules/@motion-proto/live-tokens/src/styles/tokens.css`) and overlay your overrides — or let the editor seed `themes/default.json` on first run and promote it.
+No `css: 'injected'` workaround, no `optimizeDeps` excludes — `vite build` works as-is. (You'll want the full `themeFileApi` plugin from the Quick install section above when you're ready to persist edits to disk.)
 
 ## Greenfield? Use the starter
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@motion-proto/live-tokens",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "description": "Design token editor with live CSS variable editing. Svelte 5 + Vite 6/7.",
   "keywords": [
@@ -29,11 +29,12 @@
     "src/pages/ComponentEditorPage.svelte",
     "src/pages/ComponentEditorPage.svelte.d.ts",
     "src/styles/ui-editor.css",
-    "src/styles/form-controls.css",
+    "src/styles/ui-form-controls.css",
     "src/styles/fonts.css",
     "src/styles/fonts",
     "src/styles/_padding.scss",
     "src/styles/tokens.css",
+    "src/styles/site.css",
     "src/data",
     "src/assets",
     "dist-plugin",
@@ -77,8 +78,9 @@
       "require": "./dist-plugin/index.cjs"
     },
     "./styles/ui-editor.css": "./src/styles/ui-editor.css",
-    "./styles/form-controls.css": "./src/styles/form-controls.css",
-    "./styles/fonts.css": "./src/styles/fonts.css"
+    "./starter/tokens.css": "./src/styles/tokens.css",
+    "./starter/site.css": "./src/styles/site.css",
+    "./starter/fonts.css": "./src/styles/fonts.css"
   },
   "scripts": {
     "dev": "vite",
@@ -90,7 +92,10 @@
     "build:plugin": "tsup src/vite-plugin/index.ts --out-dir dist-plugin --format esm,cjs --dts --external vite --platform node --clean",
     "build:lib": "npm run build:plugin",
     "deploy:local": "bash scripts/deploy-local.sh",
-    "prepublishOnly": "npm run build:lib"
+    "check:no-style-imports": "node scripts/check-no-style-imports.mjs",
+    "check:editor-font-isolation": "node scripts/check-editor-font-isolation.mjs",
+    "check:smoke-install": "bash scripts/smoke-install.sh",
+    "prepublishOnly": "npm run check:no-style-imports && npm run check:editor-font-isolation && npm run build:lib && npm run check:smoke-install"
   },
   "peerDependencies": {
     "sass": "^1.0",

package/src/component-editor/DialogEditor.svelte

@@ -117,7 +117,7 @@
   
       <label>
         <span>Cancel button (left)</span>
-        <select class="form-select" value={cancelVariant} onchange={setCancelVariant}>
+        <select class="ui-form-select" value={cancelVariant} onchange={setCancelVariant}>
           {#each BUTTON_VARIANTS as v}
             <option value={v}>{variantLabel(v)}</option>
           {/each}
@@ -125,7 +125,7 @@
       </label>
       <label>
         <span>Confirm button (right)</span>
-        <select class="form-select" value={confirmVariant} onchange={setConfirmVariant}>
+        <select class="ui-form-select" value={confirmVariant} onchange={setConfirmVariant}>
           {#each BUTTON_VARIANTS as v}
             <option value={v}>{variantLabel(v)}</option>
           {/each}

package/src/component-editor/NotificationEditor.svelte

@@ -122,7 +122,7 @@
       </label>
       <label>
         <span>Right button</span>
-        <select class="form-select" bind:value={rightOption}>
+        <select class="ui-form-select" bind:value={rightOption}>
           {#each BUTTON_VARIANT_OPTIONS as v}
             <option value={v}>{variantLabel(v)}</option>
           {/each}
@@ -130,7 +130,7 @@
       </label>
       <label>
         <span>Left button</span>
-        <select class="form-select" bind:value={leftOption}>
+        <select class="ui-form-select" bind:value={leftOption}>
           {#each BUTTON_VARIANT_OPTIONS as v}
             <option value={v}>{variantLabel(v)}</option>
           {/each}

package/src/component-editor/scaffolding/ComponentFileManager.svelte

@@ -499,7 +499,7 @@
 
   .cfm-title-row {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     gap: var(--ui-space-12);
     flex-wrap: wrap;
   }
@@ -518,6 +518,7 @@
     display: inline-flex;
     align-items: center;
     gap: var(--ui-space-6);
+    margin-left: auto;
     height: 26px;
     padding: 0 14px;
     font-size: var(--ui-font-size-xs);

package/src/pages/ComponentEditorPage.svelte

@@ -8,6 +8,14 @@
   import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
   import { listComponents } from '../lib/componentConfigService';
   import { selectedComponent } from '../lib/editorViewStore';
+  // Editor chrome + form controls + icon font must be JS imports (not @import
+  // inside the style block) so Vite resolves them via the module graph
+  // regardless of how the consumer compiles Svelte CSS (external ?lang.css vs
+  // injected); otherwise the @import URLs leak to the browser and 404 against
+  // the consumer's root.
+  import '../styles/ui-editor.css';
+  import '../styles/ui-form-controls.css';
+  import '@fortawesome/fontawesome-free/css/all.min.css';
 
   let drawerOpen = $state(true);
 
@@ -167,7 +175,6 @@
 </div>
 
 <style>
-  @import '../styles/ui-editor.css';
   .components-shell {
     --rail-w: 48px;
     display: grid;

package/src/pages/Editor.svelte

@@ -5,6 +5,14 @@
   import { installEditorKeybindings } from '../lib/editorKeybindings';
   import { initializeEditorStore } from '../lib/editorStore';
   import { storageKey } from '../lib/editorConfig';
+  // Editor chrome + form controls + icon font must be JS imports (not @import
+  // inside the style block) so Vite resolves them via the module graph
+  // regardless of how the consumer compiles Svelte CSS (external ?lang.css vs
+  // injected); otherwise the @import URLs leak to the browser and 404 against
+  // the consumer's root.
+  import '../styles/ui-editor.css';
+  import '../styles/ui-form-controls.css';
+  import '@fortawesome/fontawesome-free/css/all.min.css';
 
   const inOverlay = typeof window !== 'undefined' && window.parent !== window;
 
@@ -46,8 +54,6 @@
 </div>
 
 <style>
-  @import '../styles/ui-editor.css';
-
   .editor-page {
     min-height: 100vh;
     background: black;

package/src/styles/site.css

@@ -0,0 +1,138 @@
+/*
+ * Site Styles — global typography for the themed pages
+ *
+ * Unscoped element selectors (h1, h2, p, a, ul li, …) consume the design
+ * tokens in tokens.css and recolor with the user's theme. Loaded globally
+ * from main.ts.
+ *
+ * Pair with: ui-editor.css (--ui-* chrome, opposite scope — neutral and
+ * theme-immune; only loaded on editor pages).
+ */
+
+h1 {
+  font-family: var(--font-display);
+  font-size: var(--font-size-4xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  margin: 0 0 var(--space-12);
+  line-height: var(--line-height-sm);
+  overflow-wrap: break-word;
+}
+
+h2 {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+  letter-spacing: 0.01em;
+  margin: var(--space-32) 0 var(--space-12);
+  line-height: var(--line-height-sm);
+  overflow-wrap: break-word;
+}
+
+h3 {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-normal);
+  color: var(--text-primary);
+  margin: var(--space-24) 0 var(--space-8);
+  line-height: var(--line-height-sm);
+  overflow-wrap: break-word;
+}
+
+@media (max-width: 768px) {
+  h1 {
+    line-height: 1.1;
+    margin-bottom: var(--space-8);
+  }
+
+  h2 {
+    line-height: 1.15;
+    margin-top: var(--space-24);
+  }
+
+  h3 {
+    line-height: 1.2;
+    margin-top: var(--space-20);
+  }
+}
+
+p {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+  line-height: var(--line-height-md);
+  margin: 0 0 14px;
+}
+
+p:last-child {
+  margin-bottom: 0;
+}
+
+a {
+  color: var(--text-brand);
+  text-decoration: none;
+  transition: color var(--duration-150);
+}
+
+a:hover {
+  color: var(--color-brand-300);
+  text-decoration: underline;
+}
+
+strong {
+  color: var(--text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+ul {
+  padding-left: var(--space-24);
+  margin: var(--space-12) 0;
+}
+
+ul li {
+  font-family: var(--font-serif);
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+  line-height: 1.75;
+  margin-bottom: var(--space-4);
+}
+
+ul li::marker {
+  color: var(--text-tertiary);
+}
+
+ol {
+  padding-left: var(--space-24);
+  margin: var(--space-12) 0;
+}
+
+ol li {
+  font-family: var(--font-sans);
+  font-size: var(--font-size-md);
+  color: var(--text-secondary);
+  line-height: 1.6;
+  margin-bottom: var(--space-4);
+}
+
+ol li::marker {
+  color: var(--text-tertiary);
+  font-weight: var(--font-weight-semibold);
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--border-neutral-faint);
+  margin: var(--space-32) 0;
+}
+
+blockquote {
+  margin: var(--space-16) 0;
+  padding: var(--space-12) var(--space-20);
+  border: 1px solid var(--color-brand-500);
+  border-left: 4px solid var(--color-brand-500);
+  background: var(--surface-neutral-high);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  color: var(--text-secondary);
+  font-style: italic;
+}

package/src/styles/tokens.css

@@ -1298,3 +1298,27 @@
   --sectiondivider-special-description-font-weight: var(--font-weight-normal);
   --sectiondivider-special-description-line-height: var(--line-height-md);
 }
+
+/* component-aliases:start */
+:root:root {
+  /* button (default_01) */
+  --button-primary-radius: var(--radius-full);
+  --button-primary-hover-radius: var(--radius-full);
+  --button-primary-disabled-radius: var(--radius-full);
+  --button-secondary-radius: var(--radius-full);
+  --button-secondary-hover-radius: var(--radius-full);
+  --button-secondary-disabled-radius: var(--radius-full);
+  --button-outline-radius: var(--radius-full);
+  --button-outline-hover-radius: var(--radius-full);
+  --button-outline-disabled-radius: var(--radius-full);
+  --button-success-radius: var(--radius-full);
+  --button-success-hover-radius: var(--radius-full);
+  --button-success-disabled-radius: var(--radius-full);
+  --button-danger-radius: var(--radius-full);
+  --button-danger-hover-radius: var(--radius-full);
+  --button-danger-disabled-radius: var(--radius-full);
+  --button-warning-radius: var(--radius-full);
+  --button-warning-hover-radius: var(--radius-full);
+  --button-warning-disabled-radius: var(--radius-full);
+}
+/* component-aliases:end */

package/src/styles/ui-form-controls.css

@@ -0,0 +1,186 @@
+/* Editor form controls — `--ui-*` tokens only. Theme-immune; see CONVENTIONS.md. */
+
+/* ========================================
+   Form Field Layouts
+   ======================================== */
+
+/* Vertical Layout - Label Above Input/Select */
+/* Usage: Add .ui-form-field-vertical to container div wrapping label + input/select */
+.ui-form-field-vertical {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--ui-space-4);
+}
+
+.ui-form-label {
+  margin-bottom: 0;
+  font-size: var(--ui-font-size-md);
+  color: var(--ui-text-primary);
+  font-weight: var(--ui-font-weight-normal);
+}
+
+/* Horizontal Layout - Label Beside Input/Select */
+/* Usage: Add .ui-form-field-horizontal to container div wrapping label + input/select */
+.ui-form-field-horizontal {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--ui-space-8);
+}
+
+.ui-form-field-horizontal .ui-form-label {
+  white-space: nowrap;
+}
+
+/* Inline Layout - Label and Input/Select Close Together */
+/* Usage: Add .ui-form-field-inline to container div wrapping label + input/select */
+.ui-form-field-inline {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-12);
+}
+
+.ui-form-field-inline .ui-form-label {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.ui-form-field-inline .ui-form-select,
+.ui-form-field-inline .ui-form-input {
+  flex-shrink: 0;
+}
+
+/* ========================================
+   Form Control Styling
+   ======================================== */
+
+/* Select/Dropdown Styling */
+.ui-form-select {
+  /* No vertical padding - let min-height and line-height center text naturally */
+  padding: 0 var(--ui-space-16);
+  min-height: 2.375rem;  /* ~38px to match button height */
+  background: var(--ui-surface-lowest) !important;
+  border: 1px solid var(--ui-border-default) !important;
+  border-radius: var(--ui-radius-md);
+  color: var(--ui-text-primary) !important;
+  font-family: var(--ui-font-sans);
+  font-size: var(--ui-font-size-md);
+  font-weight: var(--ui-font-weight-normal);
+  line-height: var(--ui-line-height-normal);
+  vertical-align: middle;
+  cursor: pointer;
+  transition: all var(--ui-transition-fast);
+  /* Prevent clipping */
+  overflow: visible !important;
+  box-sizing: border-box !important;
+  /* Reset browser defaults */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  /* Custom dropdown arrow */
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
+  background-repeat: no-repeat !important;
+  background-position: right var(--ui-space-12) center !important;
+  padding-right: var(--ui-space-32) !important;
+}
+
+.ui-form-select:hover:not(:disabled) {
+  background-color: var(--ui-surface-low) !important;
+  border-color: var(--ui-border-medium) !important;
+}
+
+.ui-form-select:focus {
+  outline: none;
+  border-color: var(--ui-border-strong) !important;
+  box-shadow: 0 0 0 2px hsla(0, 58%, 50%, 0.2);
+}
+
+.ui-form-select:focus-visible {
+  outline: 2px solid var(--ui-highlight);
+  outline-offset: 2px;
+}
+
+.ui-form-select:active:not(:disabled) {
+  background-color: var(--ui-surface) !important;
+}
+
+.ui-form-select:disabled {
+  background-color: var(--ui-surface-lowest) !important;
+  border-color: var(--ui-border-faint) !important;
+  color: var(--ui-text-disabled) !important;
+  cursor: not-allowed;
+}
+
+/* Option Styling - Critical for Legibility */
+/* Note: Most option styling is controlled by browser/OS and cannot be fully overridden */
+/* These styles apply where browsers allow (limited support in Chrome/Firefox) */
+.ui-form-select option {
+  background-color: var(--ui-surface-lowest) !important;
+  color: var(--ui-text-primary) !important;
+  padding: var(--ui-space-8) var(--ui-space-12);
+  min-height: 2rem;
+  font-size: var(--ui-font-size-md);
+  font-family: var(--ui-font-sans);
+  line-height: var(--ui-line-height-normal);
+}
+
+/* Disabled options */
+.ui-form-select option:disabled {
+  color: var(--ui-text-disabled) !important;
+}
+
+/* Input Field Styling */
+.ui-form-input {
+  padding: var(--ui-space-8);
+  background: var(--ui-surface-lowest);
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-md);
+  color: var(--ui-text-primary);
+  font-family: var(--ui-font-sans);
+  font-size: var(--ui-font-size-md);
+  transition: border-color var(--ui-transition-fast);
+}
+
+.ui-form-input:hover:not(:disabled) {
+  border-color: var(--ui-border-strong);
+  background: var(--ui-surface-low);
+}
+
+.ui-form-input:focus {
+  outline: none;
+  border-color: var(--ui-border-strong);
+  box-shadow: 0 0 0 3px hsla(240, 5%, 38%, 0.2);
+}
+
+.ui-form-input:disabled {
+  background: var(--ui-surface-lowest);
+  border-color: var(--ui-border-faint);
+  color: var(--ui-text-disabled);
+  cursor: not-allowed;
+}
+
+/* Placeholder text styling */
+.ui-form-input::placeholder {
+  color: var(--ui-text-muted);
+}
+
+/* Number input spinner buttons */
+.ui-form-input[type="number"]::-webkit-inner-spin-button,
+.ui-form-input[type="number"]::-webkit-outer-spin-button {
+  opacity: 1;
+}
+
+/* Checkbox and Radio Styling */
+.ui-form-checkbox,
+.ui-form-radio {
+  cursor: pointer;
+  width: var(--ui-space-16);
+  height: var(--ui-space-16);
+  accent-color: var(--ui-gray-600);
+}
+
+.ui-form-checkbox:disabled,
+.ui-form-radio:disabled {
+  cursor: not-allowed;
+}

package/src/ui/FontStackEditor.svelte

@@ -189,7 +189,7 @@
                 style="font-family: {slotCssValue(slot)};{stack.variable === '--font-display' ? ' font-size: var(--ui-font-size-2xl);' : ''}"
               >The quick brown fox jumps over the lazy dog</span>
               <select
-                class="form-select slot-select"
+                class="ui-form-select slot-select"
                 value={slotKey(slot)}
                 onchange={(e) => onSelectChange(e, stack.variable, i)}
               >

package/src/ui/ProjectFontsSection.svelte

@@ -252,7 +252,7 @@
       {#if addMode === 'google'}
         <input
           type="text"
-          class="form-input"
+          class="ui-form-input"
           placeholder="Search Google Fonts (e.g. Inter)"
           bind:value={googleQuery}
         />
@@ -271,7 +271,7 @@
       {:else if addMode === 'url'}
         <input
           type="text"
-          class="form-input"
+          class="ui-form-input"
           placeholder="https://fonts.googleapis.com/css2?family=... or Typekit URL"
           bind:value={urlInput}
         />
@@ -310,7 +310,7 @@
           <div class="pf-detected">Couldn't auto-detect families (CORS or no metadata). Name them:</div>
           <input
             type="text"
-            class="form-input"
+            class="ui-form-input"
             placeholder="Comma-separated family names"
             bind:value={urlManualFamilies}
           />
@@ -318,7 +318,7 @@
         {/if}
       {:else if addMode === 'fontface'}
         <textarea
-          class="form-input pf-textarea"
+          class="ui-form-input pf-textarea"
           placeholder={'Paste one or more @font-face { ... } rules'}
           rows="6"
           bind:value={fontFaceText}

package/src/styles/form-controls.css

@@ -1,188 +0,0 @@
-/* Form Controls - Global Styling for Dropdowns, Selects, Inputs */
-/* Ensures consistent, legible styling across the application */
-
-/* ========================================
-   Form Field Layouts
-   ======================================== */
-
-/* Vertical Layout - Label Above Input/Select */
-/* Usage: Add .form-field-vertical to container div wrapping label + input/select */
-.form-field-vertical {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: var(--space-4);
-}
-
-.form-label {
-  margin-bottom: 0;
-  font-size: var(--font-size-md);
-  color: var(--text-primary);
-  font-weight: var(--font-weight-light);
-}
-
-/* Horizontal Layout - Label Beside Input/Select */
-/* Usage: Add .form-field-horizontal to container div wrapping label + input/select */
-.form-field-horizontal {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--space-8);
-}
-
-.form-field-horizontal .form-label {
-  white-space: nowrap;
-}
-
-/* Inline Layout - Label and Input/Select Close Together */
-/* Usage: Add .form-field-inline to container div wrapping label + input/select */
-.form-field-inline {
-  display: flex;
-  align-items: center;
-  gap: var(--space-12);
-}
-
-.form-field-inline .form-label {
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.form-field-inline .form-select,
-.form-field-inline .form-input {
-  flex-shrink: 0;
-}
-
-/* ========================================
-   Form Control Styling
-   ======================================== */
-
-/* Select/Dropdown Styling - Design System Compliant */
-.form-select {
-  /* Base styling using design system colors */
-  /* No vertical padding - let min-height and line-height center text naturally */
-  padding: 0 var(--space-16);
-  min-height: 2.375rem;  /* ~38px to match button height */
-  background: var(--surface-neutral-lowest) !important;
-  border: 1px solid var(--border-neutral) !important;
-  border-radius: var(--radius-md);
-  color: var(--text-primary) !important;
-  font-family: var(--font-sans);
-  font-size: var(--font-size-md);
-  font-weight: var(--font-weight-light);
-  line-height: var(--line-height-md);
-  vertical-align: middle;
-  cursor: pointer;
-  transition: all var(--duration-150);
-  /* Prevent clipping */
-  overflow: visible !important;
-  box-sizing: border-box !important;
-  /* Reset browser defaults */
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  /* Custom dropdown arrow */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
-  background-repeat: no-repeat !important;
-  background-position: right var(--space-12) center !important;
-  padding-right: var(--space-32) !important;
-}
-
-.form-select:hover:not(:disabled) {
-  background-color: var(--surface-neutral-low) !important;
-  border-color: var(--border-neutral-medium) !important;
-}
-
-.form-select:focus {
-  outline: none;
-  border-color: var(--border-neutral-strong) !important;
-  box-shadow: 0 0 0 2px hsla(0, 58%, 50%, 0.2);
-}
-
-.form-select:focus-visible {
-  outline: 2px solid var(--color-brand-500);
-  outline-offset: 2px;
-}
-
-.form-select:active:not(:disabled) {
-  background-color: var(--surface-neutral) !important;
-}
-
-.form-select:disabled {
-  background-color: var(--surface-neutral-lowest) !important;
-  border-color: var(--border-neutral-faint) !important;
-  color: var(--text-disabled) !important;
-  cursor: not-allowed;
-}
-
-/* Option Styling - Critical for Legibility */
-/* Note: Most option styling is controlled by browser/OS and cannot be fully overridden */
-/* These styles apply where browsers allow (limited support in Chrome/Firefox) */
-.form-select option {
-  background-color: var(--surface-neutral-lowest) !important;
-  color: var(--text-primary) !important;
-  padding: var(--space-8) var(--space-12);
-  min-height: 2rem;
-  font-size: var(--font-size-md);
-  font-family: var(--font-sans);
-  line-height: var(--line-height-md);
-}
-
-/* Disabled options */
-.form-select option:disabled {
-  color: var(--text-disabled) !important;
-}
-
-/* Input Field Styling */
-.form-input {
-  padding: var(--space-8);
-  background: var(--surface-neutral-lowest);
-  border: 1px solid var(--border-neutral);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-family: var(--font-sans);
-  font-size: var(--font-size-md);
-  transition: border-color var(--duration-150);
-}
-
-.form-input:hover:not(:disabled) {
-  border-color: var(--border-neutral-strong);
-  background: var(--surface-neutral-low);
-}
-
-.form-input:focus {
-  outline: none;
-  border-color: var(--border-neutral-strong);
-  box-shadow: 0 0 0 3px hsla(240, 5%, 38%, 0.2);
-}
-
-.form-input:disabled {
-  background: var(--surface-neutral-lowest);
-  border-color: var(--border-neutral-faint);
-  color: var(--text-disabled);
-  cursor: not-allowed;
-}
-
-/* Placeholder text styling */
-.form-input::placeholder {
-  color: var(--text-muted);
-}
-
-/* Number input spinner buttons */
-.form-input[type="number"]::-webkit-inner-spin-button,
-.form-input[type="number"]::-webkit-outer-spin-button {
-  opacity: 1;
-}
-
-/* Checkbox and Radio Styling */
-.form-checkbox,
-.form-radio {
-  cursor: pointer;
-  width: var(--space-16);
-  height: var(--space-16);
-  accent-color: var(--color-neutral-400);
-}
-
-.form-checkbox:disabled,
-.form-radio:disabled {
-  cursor: not-allowed;
-}