@phcdevworks/spectre-ui 1.1.0 → 1.1.2

package/LICENSE

@@ -1,21 +1,20 @@
 MIT License
 
-Copyright (c) 2025 PHCDevworks
+Copyright (c) 2026 PHCDevworks
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,120 +1,198 @@
 # @phcdevworks/spectre-ui
 
-### **The Blueprint (Layer 2 of the Spectre 8-Layer Arsenal)**
+[![GitHub issues](https://img.shields.io/github/issues/phcdevworks/spectre-ui)](https://github.com/phcdevworks/spectre-ui/issues)
+[![GitHub pull requests](https://img.shields.io/github/issues-pr/phcdevworks/spectre-ui)](https://github.com/phcdevworks/spectre-ui/pulls)
+[![License](https://img.shields.io/github/license/phcdevworks/spectre-ui)](LICENSE)
 
-`@phcdevworks/spectre-ui` is the structural engine of the Spectre design system. It translates the design "DNA" from `@phcdevworks/spectre-tokens` into CSS structure, localized Tailwind presets, and type-safe class recipes.
+`@phcdevworks/spectre-ui` is the implementation layer between
+[`@phcdevworks/spectre-tokens`](https://github.com/phcdevworks/spectre-tokens)
+and downstream adapters or apps.
 
-🤝 **[Contributing Guide](CONTRIBUTING.md)** | 📝 **[Changelog](CHANGELOG.md)** | 🏛️ **[Spectre Arsenal](https://github.com/phcdevworks)**
+Maintained by PHCDevworks, it turns Spectre tokens into reusable CSS bundles,
+Tailwind tooling, and type-safe class recipes. It is framework-agnostic,
+token-driven, and follows a strict zero-hex policy so visual values do not drift
+locally.
 
----
+[Contributing](CONTRIBUTING.md) | [Changelog](CHANGELOG.md) |
+[Security Policy](SECURITY.md)
 
-## 🏗️ Core Architecture
+## Key capabilities
 
-This package operates as a pure **Blueprint Layer**. It follows a strict **Zero-Hex Enforcement** policy—visual values are imported via `--sp-*` variables, ensuring that if tokens change, the entire UI layer updates automatically.
+- Ships precompiled CSS: `index.css`, `base.css`, `components.css`, and
+  `utilities.css`
+- Provides Tailwind theme and preset helpers built from Spectre tokens
+- Exports type-safe class recipes for shared UI patterns
+- Keeps CSS classes and recipe APIs aligned
+- Gives adapters and apps a stable styling contract instead of re-implementing
+  classes
+- Enforces a zero-hex approach so visual values stay tied to
+  `@phcdevworks/spectre-tokens`
 
-- 💎 **Token-Driven**: Fully compatible with `@phcdevworks/spectre-tokens` v2.1.0.
-- 📦 **Precompiled CSS**: Ships `base`, `components`, and `utilities` bundles.
-- 🧪 **Type-Safe Recipes**: Pure JS/TS functions for generating framework-agnostic class strings.
-- 🌪️ **Tailwind Preset**: Mirrors the design scale into the Tailwind utility engine.
+## Installation
 
----
+```bash
+npm install @phcdevworks/spectre-ui
+```
 
-## 🚀 Quick Start
+## Quick start
 
-### Installation
+### CSS import
 
-```bash
-npm install @phcdevworks/spectre-ui
+Import the full stylesheet:
+
+```ts
+import '@phcdevworks/spectre-ui/index.css'
 ```
 
-### 1. Import CSS
-For most applications, importing the unified `index.css` is recommended.
+Or import the bundles separately:
 
 ```ts
-import "@phcdevworks/spectre-ui/index.css";
+import '@phcdevworks/spectre-ui/base.css'
+import '@phcdevworks/spectre-ui/components.css'
+import '@phcdevworks/spectre-ui/utilities.css'
 ```
 
-### 2. Tailwind Integration
-Synchronize your Tailwind theme with the Spectre token scale.
+### Tailwind preset usage
+
+Use Spectre tokens as the source of truth for your Tailwind theme:
 
 ```ts
 // tailwind.config.ts
-import { createSpectreTailwindPreset } from "@phcdevworks/spectre-ui/tailwind";
-import { spectreTokens } from "@phcdevworks/spectre-tokens";
+import type { Config } from 'tailwindcss'
+import { createSpectreTailwindPreset } from '@phcdevworks/spectre-ui/tailwind'
+import tokens from '@phcdevworks/spectre-tokens'
 
-const spectrePreset = createSpectreTailwindPreset({ tokens: spectreTokens });
+const config: Config = {
+  content: ['./src/**/*.{ts,tsx,js,jsx,html}'],
+  presets: [createSpectreTailwindPreset({ tokens })]
+}
 
-export default {
-  content: ["./src/**/*.{js,ts,jsx,tsx}"],
-  presets: [spectrePreset],
-};
+export default config
 ```
 
----
+### Class recipe usage
 
-## 🧩 Class Recipes
+Class recipes are the stable styling API for adapters and apps. They return
+predictable class strings and keep behavior consistent across frameworks.
 
-Recipes are the API contract for all Spectre framework adapters. They ensure `.sp-btn--primary` always behaves identical whether used in React, Astro, or WordPress.
+```ts
+import {
+  getBadgeClasses,
+  getButtonClasses,
+  getPricingCardClasses
+} from '@phcdevworks/spectre-ui'
+
+const cta = getButtonClasses({ variant: 'primary', size: 'lg' })
+const badge = getBadgeClasses({ variant: 'success', size: 'sm' })
+const pricingCard = getPricingCardClasses({ featured: true })
+```
 
-### Core Components
-| Recipe | Primary Variants | Sizes |
-| :--- | :--- | :--- |
-| `getButtonClasses` | `primary`, `secondary`, `ghost`, `danger`, `success` | `sm`, `md`, `lg` |
-| `getBadgeClasses` | `primary`, `success`, `warning`, `danger` | `sm`, `md`, `lg` |
-| `getCardClasses` | `elevated`, `outline`, `ghost` | `padded` |
-| `getInputClasses` | `default`, `error`, `success` | `sm`, `md`, `lg` |
-| `getIconBoxClasses` | `primary`, `success`, `warning`, `danger`, `info` | `sm`, `md`, `lg` |
+## What this package owns
 
-### Specialized Components
-| Recipe | Description |
-| :--- | :--- |
-| `getPricingCardClasses` | Semantic structure for pricing tables and plans. |
-| `getTestimonialClasses` | Compound classes for quotes, authors, and roles. |
-| `getRatingClasses` | Layout recipes for star ratings and count labels. |
+- Token-driven CSS implementation
+- Precompiled CSS bundles and utility classes
+- Tailwind helpers and preset generation
+- Type-safe class recipes for shared UI contracts
+- Stable styling behavior consumed by downstream adapters and apps
 
-```ts
-import { getButtonClasses, getPricingCardClasses } from "@phcdevworks/spectre-ui";
+Golden rule: consume tokens, do not redefine them.
 
-// Generate a primary CTA class string
-const cta = getButtonClasses({ variant: "primary", size: "lg" });
-// Result: "sp-btn sp-btn--primary sp-btn--lg"
+## What this package does not own
 
-// Generate pricing card layout
-const pricing = getPricingCardClasses({ featured: true });
-```
+- Design values or semantic meaning That belongs to
+  `@phcdevworks/spectre-tokens`.
+- Framework-specific component delivery Adapters and apps consume
+  `@phcdevworks/spectre-ui`; they do not recreate its styling logic.
+- Local visual values outside the token contract Hardcoded hex, spacing, or
+  shadow values are drift unless clearly intentional and documented.
 
----
+## Package exports / API surface
 
-## 🏛️ The Spectre Suite Hierarchy
+### Root package
 
-Spectre is built on a non-negotiable hierarchy to prevent style leakage and duplication:
+Exports CSS path constants and class recipes, including:
 
-1.  **Layer 1: Tokens** ([@phcdevworks/spectre-tokens](https://github.com/phcdevworks/spectre-tokens)) – The source of truth for all design values.
-2.  **Layer 2: UI (This Package)** – Translates tokens into CSS structure and recipes.
-3.  **Layer 3: Adapters** (WordPress, Astro, etc.) – Thin bridges that map Layer 2 to specific frameworks.
+- `spectreStyles`
+- `getButtonClasses`
+- `getBadgeClasses`
+- `getCardClasses`
+- `getInputClasses`
+- `getIconBoxClasses`
+- `getPricingCardClasses`
+- `getTestimonialClasses`
+- `getRatingClasses`
 
-> **The Golden Rule**: Tokens define *meaning*. UI defines *structure*. Adapters define *delivery*.
+Recipes also export their related TypeScript option and variant types.
 
----
+### Tailwind entry point
 
-## 🛠️ Development
+`@phcdevworks/spectre-ui/tailwind` exports:
 
-### Build Pipeline
-Compiles TypeScript, processes PostCSS, and bundles artifacts into `dist/`.
+- `createSpectreTailwindPreset`
+- `createSpectreTailwindTheme`
 
-```bash
-npm run build
-```
+### CSS entry points
+
+- `@phcdevworks/spectre-ui/index.css`
+- `@phcdevworks/spectre-ui/base.css`
+- `@phcdevworks/spectre-ui/components.css`
+- `@phcdevworks/spectre-ui/utilities.css`
 
-### Testing
-Run the Vitest suite to verify recipe outputs and token-first compliance.
+## Relationship to the rest of Spectre
+
+Spectre keeps responsibilities separate:
+
+- [`@phcdevworks/spectre-tokens`](https://github.com/phcdevworks/spectre-tokens)
+  defines design values and semantic meaning
+- `@phcdevworks/spectre-ui` turns those tokens into reusable CSS, Tailwind
+  tooling, and type-safe class recipes
+- Adapters and apps consume `@phcdevworks/spectre-ui` instead of re-implementing
+  its styling layer
+
+That separation keeps recipe behavior consistent across frameworks and reduces
+implementation drift.
+
+## Development
+
+Install dependencies, then run the package checks:
 
 ```bash
+npm run build
 npm test
 ```
 
----
+Key source areas:
+
+- `src/styles/` for source CSS
+- `src/recipes/` for class recipes
+- `src/tailwind/` for Tailwind helpers
+- `tests/` for contract and regression coverage
+- `examples/` for visual demos and verification fixtures
+
+## Examples
+
+Use [`examples/examples.html`](examples/examples.html) as the visual index for
+the package demos.
+
+Available examples include:
+
+- `vanilla.html` for the broad component showcase
+- `showroom.html` for a richer marketing-style composition
+- `verification.html` and focused verification fixtures for regression checks
+
+## Contributing
+
+PHCDevworks maintains this package as part of the Spectre suite.
+
+When contributing:
+
+- keep styling token-driven
+- keep recipe APIs and CSS classes in sync
+- avoid local visual values unless clearly intentional
+- run `npm run build` and `npm test` before opening a pull request
+
+See [CONTRIBUTING.md](CONTRIBUTING.md) for the full workflow.
 
-## ❤️ Support & Community
+## License
 
-- **License**: MIT © [PHCDevworks](https://phcdevworks.com)
+MIT © PHCDevworks. See [LICENSE](LICENSE).

package/dist/base.css

@@ -1,3 +1,378 @@
+:root {
+  --sp-surface-page: #f7f8fb;
+  --sp-surface-card: #ffffff;
+  --sp-surface-input: #ffffff;
+  --sp-surface-overlay: rgba(20, 27, 36, 0.6);
+  --sp-surface-hero: linear-gradient(135deg, #5b6ee1 0%, #6f3fd7 100%);
+  --sp-text-on-page-default: #141b24;
+  --sp-text-on-page-muted: #4b576a;
+  --sp-text-on-page-subtle: #657287;
+  --sp-text-on-page-meta: #657287;
+  --sp-text-on-surface-default: #141b24;
+  --sp-text-on-surface-muted: #4b576a;
+  --sp-text-on-surface-subtle: #657287;
+  --sp-text-on-surface-meta: #657287;
+  --sp-component-card-text: #141b24;
+  --sp-component-card-text-muted: #657287;
+  --sp-component-input-text: #141b24;
+  --sp-component-input-placeholder: #657287;
+  --sp-button-text-default: #141b24;
+  --sp-button-text-on-primary: #ffffff;
+  --sp-badge-neutral-bg: #eef1f6;
+  --sp-badge-neutral-text: #374253;
+  --sp-badge-info-bg: #e0f2fe;
+  --sp-badge-info-text: #075985;
+  --sp-badge-success-bg: #dcfce7;
+  --sp-badge-success-text: #15803d;
+  --sp-badge-warning-bg: #fff1c2;
+  --sp-badge-warning-text: #8f5200;
+  --sp-badge-danger-bg: #fee2e2;
+  --sp-badge-danger-text: #b91c1c;
+  --sp-icon-box-bg: #ffffff;
+  --sp-icon-box-border: #d9dfeb;
+  --sp-icon-box-icon-default: #0369a1;
+  --sp-icon-box-icon-success: #16a34a;
+  --sp-icon-box-icon-warning: #d48806;
+  --sp-icon-box-icon-danger: #dc2626;
+  --sp-color-brand-50: #eef4ff;
+  --sp-color-brand-100: #d9e7ff;
+  --sp-color-brand-200: #b9d2ff;
+  --sp-color-brand-300: #8ab6ff;
+  --sp-color-brand-400: #5a92ff;
+  --sp-color-brand-500: #336df4;
+  --sp-color-brand-600: #1f57db;
+  --sp-color-brand-700: #1946b4;
+  --sp-color-brand-800: #173b8f;
+  --sp-color-brand-900: #16336f;
+  --sp-color-neutral-50: #f7f8fb;
+  --sp-color-neutral-100: #eef1f6;
+  --sp-color-neutral-200: #d9dfeb;
+  --sp-color-neutral-300: #b7c1d4;
+  --sp-color-neutral-400: #8a96ad;
+  --sp-color-neutral-500: #657287;
+  --sp-color-neutral-600: #4b576a;
+  --sp-color-neutral-700: #374253;
+  --sp-color-neutral-800: #222b38;
+  --sp-color-neutral-900: #141b24;
+  --sp-color-accent-50: #f6f2ff;
+  --sp-color-accent-100: #eee5ff;
+  --sp-color-accent-200: #ddccff;
+  --sp-color-accent-300: #c3a7ff;
+  --sp-color-accent-400: #a279ff;
+  --sp-color-accent-500: #854ff7;
+  --sp-color-accent-600: #7135dd;
+  --sp-color-accent-700: #5d28b8;
+  --sp-color-accent-800: #4d2393;
+  --sp-color-accent-900: #401f75;
+  --sp-color-success-50: #f0fdf4;
+  --sp-color-success-100: #dcfce7;
+  --sp-color-success-200: #bbf7d0;
+  --sp-color-success-300: #86efac;
+  --sp-color-success-400: #4ade80;
+  --sp-color-success-500: #22c55e;
+  --sp-color-success-600: #16a34a;
+  --sp-color-success-700: #15803d;
+  --sp-color-success-800: #166534;
+  --sp-color-success-900: #14532d;
+  --sp-color-warning-50: #fffbea;
+  --sp-color-warning-100: #fff1c2;
+  --sp-color-warning-200: #ffe08a;
+  --sp-color-warning-300: #ffd24d;
+  --sp-color-warning-400: #ffc21a;
+  --sp-color-warning-500: #f5ad00;
+  --sp-color-warning-600: #d48806;
+  --sp-color-warning-700: #ad6800;
+  --sp-color-warning-800: #8f5200;
+  --sp-color-warning-900: #734000;
+  --sp-color-error-50: #fef2f2;
+  --sp-color-error-100: #fee2e2;
+  --sp-color-error-200: #fecaca;
+  --sp-color-error-300: #fca5a5;
+  --sp-color-error-400: #f87171;
+  --sp-color-error-500: #ef4444;
+  --sp-color-error-600: #dc2626;
+  --sp-color-error-700: #b91c1c;
+  --sp-color-error-800: #991b1b;
+  --sp-color-error-900: #7f1d1d;
+  --sp-color-info-50: #f0f9ff;
+  --sp-color-info-100: #e0f2fe;
+  --sp-color-info-200: #bae6fd;
+  --sp-color-info-300: #7dd3fc;
+  --sp-color-info-400: #38bdf8;
+  --sp-color-info-500: #0ea5e9;
+  --sp-color-info-600: #0369a1;
+  --sp-color-info-700: #075985;
+  --sp-color-info-800: #0c4a6e;
+  --sp-color-info-900: #082f49;
+  --sp-color-indigo-500: #5b6ee1;
+  --sp-color-indigo-600: #4d61db;
+  --sp-color-violet-600: #6f3fd7;
+  --sp-color-focus-primary: #336df4;
+  --sp-color-focus-error: #ef4444;
+  --sp-color-focus-info: #0369a1;
+  --sp-color-white-0: #;
+  --sp-color-white-1: f;
+  --sp-color-white-2: f;
+  --sp-color-white-3: f;
+  --sp-color-white-4: f;
+  --sp-color-white-5: f;
+  --sp-color-white-6: f;
+  --sp-color-black-0: #;
+  --sp-color-black-1: 0;
+  --sp-color-black-2: 0;
+  --sp-color-black-3: 0;
+  --sp-color-black-4: 0;
+  --sp-color-black-5: 0;
+  --sp-color-black-6: 0;
+  --sp-space-0: 0rem;
+  --sp-space-4: 0.25rem;
+  --sp-space-8: 0.5rem;
+  --sp-space-12: 0.75rem;
+  --sp-space-16: 1rem;
+  --sp-space-20: 1.25rem;
+  --sp-space-24: 1.5rem;
+  --sp-space-32: 2rem;
+  --sp-space-40: 2.5rem;
+  --sp-space-48: 3rem;
+  --sp-space-56: 3.5rem;
+  --sp-space-64: 4rem;
+  --sp-space-80: 5rem;
+  --sp-space-96: 6rem;
+  --sp-layout-section-padding-sm: 1.5rem;
+  --sp-layout-section-padding-md: 2rem;
+  --sp-layout-section-padding-lg: 3rem;
+  --sp-layout-section-gap-sm: 1rem;
+  --sp-layout-section-gap-md: 1.5rem;
+  --sp-layout-section-gap-lg: 2rem;
+  --sp-layout-stack-gap-sm: 0.5rem;
+  --sp-layout-stack-gap-md: 0.75rem;
+  --sp-layout-stack-gap-lg: 1rem;
+  --sp-layout-container-padding-inline-sm: 1rem;
+  --sp-layout-container-padding-inline-md: 1.5rem;
+  --sp-layout-container-padding-inline-lg: 2rem;
+  --sp-layout-container-max-width: 72rem;
+  --sp-border-width-base: 1px;
+  --sp-border-width-thick: 2px;
+  --sp-radius-none: 0;
+  --sp-radius-sm: 2px;
+  --sp-radius-md: 4px;
+  --sp-radius-lg: 8px;
+  --sp-radius-pill: 999px;
+  --sp-font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+  --sp-font-family-serif: 'Times New Roman', Times, serif;
+  --sp-font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  --sp-font-xs-size: 0.75rem;
+  --sp-font-xs-line-height: 1.25rem;
+  --sp-font-xs-weight: 400;
+  --sp-font-sm-size: 0.875rem;
+  --sp-font-sm-line-height: 1.5rem;
+  --sp-font-sm-weight: 400;
+  --sp-font-md-size: 1rem;
+  --sp-font-md-line-height: 1.75rem;
+  --sp-font-md-weight: 500;
+  --sp-font-lg-size: 1.25rem;
+  --sp-font-lg-line-height: 2rem;
+  --sp-font-lg-weight: 500;
+  --sp-font-xl-size: 1.5rem;
+  --sp-font-xl-line-height: 2.125rem;
+  --sp-font-xl-weight: 600;
+  --sp-font-2xl-size: 1.875rem;
+  --sp-font-2xl-line-height: 2.5rem;
+  --sp-font-2xl-weight: 600;
+  --sp-font-xs-letter-spacing: 0.02em;
+  --sp-text-on-page-default: #141b24;
+  --sp-text-on-page-muted: #4b576a;
+  --sp-text-on-page-subtle: #657287;
+  --sp-text-on-page-meta: #657287;
+  --sp-text-on-surface-default: #141b24;
+  --sp-text-on-surface-muted: #4b576a;
+  --sp-text-on-surface-subtle: #657287;
+  --sp-text-on-surface-meta: #657287;
+  --sp-badge-neutral-bg: #eef1f6;
+  --sp-badge-neutral-text: #374253;
+  --sp-badge-info-bg: #e0f2fe;
+  --sp-badge-info-text: #075985;
+  --sp-badge-success-bg: #dcfce7;
+  --sp-badge-success-text: #166534;
+  --sp-badge-warning-bg: #fff1c2;
+  --sp-badge-warning-text: #8f5200;
+  --sp-badge-danger-bg: #fee2e2;
+  --sp-badge-danger-text: #991b1b;
+  --sp-icon-box-bg: #ffffff;
+  --sp-icon-box-border: #d9dfeb;
+  --sp-icon-box-icon-default: #0369a1;
+  --sp-icon-box-icon-success: #16a34a;
+  --sp-icon-box-icon-warning: #d48806;
+  --sp-icon-box-icon-danger: #dc2626;
+  --sp-shadow-none: none;
+  --sp-shadow-sm: 0 1px 2px 0 rgba(34, 43, 56, 0.06);
+  --sp-shadow-md: 0 2px 6px -1px rgba(34, 43, 56, 0.08);
+  --sp-shadow-lg: 0 6px 16px -4px rgba(34, 43, 56, 0.12);
+  --sp-breakpoint-sm: 640px;
+  --sp-breakpoint-md: 768px;
+  --sp-breakpoint-lg: 1024px;
+  --sp-breakpoint-xl: 1280px;
+  --sp-breakpoint-2xl: 1536px;
+  --sp-z-index-base: 0;
+  --sp-z-index-dropdown: 1000;
+  --sp-z-index-sticky: 1100;
+  --sp-z-index-fixed: 1200;
+  --sp-z-index-overlay: 1300;
+  --sp-z-index-modal: 1400;
+  --sp-z-index-popover: 1500;
+  --sp-z-index-tooltip: 1600;
+  --sp-duration-instant: 75ms;
+  --sp-duration-fast: 150ms;
+  --sp-duration-base: 200ms;
+  --sp-duration-moderate: 300ms;
+  --sp-duration-slow: 500ms;
+  --sp-duration-slower: 700ms;
+  --sp-easing-linear: linear;
+  --sp-easing-in: cubic-bezier(0.4, 0, 1, 1);
+  --sp-easing-out: cubic-bezier(0, 0, 0.2, 1);
+  --sp-easing-inout: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-easing-spring: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-opacity-disabled: 0.38;
+  --sp-opacity-hover: 0.92;
+  --sp-opacity-active: 0.84;
+  --sp-opacity-focus: 1;
+  --sp-opacity-overlay: 0.5;
+  --sp-opacity-tooltip: 0.95;
+  --sp-focus-ring-width: 2px;
+  --sp-focus-ring-offset: 2px;
+  --sp-focus-ring-style: solid;
+  --sp-min-touch-target: 44px;
+  --sp-min-text-size: 16px;
+  --sp-button-primary-bg: #0369a1;
+  --sp-button-primary-bghover: #075985;
+  --sp-button-primary-bgactive: #0c4a6e;
+  --sp-button-primary-bgdisabled: #d9dfeb;
+  --sp-button-primary-text: #ffffff;
+  --sp-button-primary-textdisabled: #8a96ad;
+  --sp-button-primary-focusring: rgba(14, 165, 233, 0.4);
+  --sp-button-secondary-bg: #ffffff;
+  --sp-button-secondary-bghover: #f7f8fb;
+  --sp-button-secondary-bgactive: #eef1f6;
+  --sp-button-secondary-bgdisabled: #f7f8fb;
+  --sp-button-secondary-text: #075985;
+  --sp-button-secondary-textdisabled: #8a96ad;
+  --sp-button-secondary-border: #075985;
+  --sp-button-secondary-borderdisabled: #d9dfeb;
+  --sp-button-secondary-focusring: rgba(14, 165, 233, 0.4);
+  --sp-button-ghost-bg: transparent;
+  --sp-button-ghost-bghover: #f0f9ff;
+  --sp-button-ghost-bgactive: #e0f2fe;
+  --sp-button-ghost-bgdisabled: transparent;
+  --sp-button-ghost-text: #075985;
+  --sp-button-ghost-textdisabled: #8a96ad;
+  --sp-button-ghost-focusring: rgba(14, 165, 233, 0.4);
+  --sp-button-danger-bg: #dc2626;
+  --sp-button-danger-bghover: #b91c1c;
+  --sp-button-danger-bgactive: #991b1b;
+  --sp-button-danger-bgdisabled: #fecaca;
+  --sp-button-danger-text: #ffffff;
+  --sp-button-danger-textdisabled: #8a96ad;
+  --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
+  --sp-button-success-bg: #15803d;
+  --sp-button-success-bghover: #166534;
+  --sp-button-success-bgactive: #14532d;
+  --sp-button-success-bgdisabled: #bbf7d0;
+  --sp-button-success-text: #ffffff;
+  --sp-button-success-textdisabled: #8a96ad;
+  --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
+  --sp-button-cta-bg: #1f57db;
+  --sp-button-cta-bghover: #1946b4;
+  --sp-button-cta-bgactive: #173b8f;
+  --sp-button-cta-bgdisabled: #b9d2ff;
+  --sp-button-cta-text: #ffffff;
+  --sp-button-cta-textdisabled: #8a96ad;
+  --sp-button-cta-shadow: 0 4px 14px 0 rgba(51, 109, 244, 0.39);
+  --sp-button-cta-focusring: rgba(51, 109, 244, 0.4);
+  --sp-button-accent-bg: #7135dd;
+  --sp-button-accent-bghover: #5d28b8;
+  --sp-button-accent-bgactive: #4d2393;
+  --sp-button-accent-bgdisabled: #ddccff;
+  --sp-button-accent-text: #ffffff;
+  --sp-button-accent-textdisabled: #8a96ad;
+  --sp-button-accent-focusring: rgba(133, 79, 247, 0.4);
+  --sp-form-default-bg: #ffffff;
+  --sp-form-default-border: #b7c1d4;
+  --sp-form-default-text: #141b24;
+  --sp-form-default-placeholder: #657287;
+  --sp-form-hover-border: #0ea5e9;
+  --sp-form-focus-border: #0ea5e9;
+  --sp-form-focus-ring: #0ea5e9;
+  --sp-form-valid-border: #22c55e;
+  --sp-form-valid-bg: #f0fdf4;
+  --sp-form-valid-text: #15803d;
+  --sp-form-invalid-border: #ef4444;
+  --sp-form-invalid-bg: #fef2f2;
+  --sp-form-invalid-text: #b91c1c;
+  --sp-form-disabled-bg: #f7f8fb;
+  --sp-form-disabled-border: #d9dfeb;
+  --sp-form-disabled-text: #8a96ad;
+  --sp-animation-fadein-duration: 200ms;
+  --sp-animation-fadein-easing: cubic-bezier(0, 0, 0.2, 1);
+  --sp-animation-fadein-keyframes: fade-in;
+  --sp-animation-fadeout-duration: 150ms;
+  --sp-animation-fadeout-easing: cubic-bezier(0.4, 0, 1, 1);
+  --sp-animation-fadeout-keyframes: fade-out;
+  --sp-animation-slideup-duration: 300ms;
+  --sp-animation-slideup-easing: cubic-bezier(0, 0, 0.2, 1);
+  --sp-animation-slideup-keyframes: slide-up;
+  --sp-animation-slidedown-duration: 300ms;
+  --sp-animation-slidedown-easing: cubic-bezier(0, 0, 0.2, 1);
+  --sp-animation-slidedown-keyframes: slide-down;
+  --sp-animation-scalein-duration: 200ms;
+  --sp-animation-scalein-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --sp-animation-scalein-keyframes: scale-in;
+  --sp-animation-bounce-duration: 300ms;
+  --sp-animation-bounce-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-animation-bounce-keyframes: bounce;
+  --sp-animation-shake-duration: 250ms;
+  --sp-animation-shake-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-animation-shake-keyframes: shake;
+  --sp-animation-pulse-duration: 1200ms;
+  --sp-animation-pulse-easing: cubic-bezier(0.4, 0, 0.2, 1);
+  --sp-animation-pulse-keyframes: pulse;
+}
+:root[data-spectre-theme="dark"] {
+  --sp-surface-page: #141b24;
+  --sp-surface-card: #222b38;
+  --sp-surface-input: #374253;
+  --sp-surface-overlay: #222b38;
+  --sp-surface-hero: linear-gradient(135deg, #401f75 0%, #5d28b8 100%);
+  --sp-text-on-page-default: #f7f8fb;
+  --sp-text-on-page-muted: #b7c1d4;
+  --sp-text-on-page-subtle: #8a96ad;
+  --sp-text-on-page-meta: #8a96ad;
+  --sp-text-on-surface-default: #eef1f6;
+  --sp-text-on-surface-muted: #b7c1d4;
+  --sp-text-on-surface-subtle: #8a96ad;
+  --sp-text-on-surface-meta: #8a96ad;
+  --sp-component-card-text: #eef1f6;
+  --sp-component-card-text-muted: #b7c1d4;
+  --sp-component-input-text: #eef1f6;
+  --sp-component-input-placeholder: #b7c1d4;
+  --sp-button-text-default: #eef1f6;
+  --sp-button-text-on-primary: #ffffff;
+  --sp-badge-neutral-bg: #374253;
+  --sp-badge-neutral-text: #eef1f6;
+  --sp-badge-info-bg: #0c4a6e;
+  --sp-badge-info-text: #e0f2fe;
+  --sp-badge-success-bg: #166534;
+  --sp-badge-success-text: #dcfce7;
+  --sp-badge-warning-bg: #8f5200;
+  --sp-badge-warning-text: #fff1c2;
+  --sp-badge-danger-bg: #991b1b;
+  --sp-badge-danger-text: #fee2e2;
+  --sp-icon-box-bg: #222b38;
+  --sp-icon-box-border: #374253;
+  --sp-icon-box-icon-default: #7dd3fc;
+  --sp-icon-box-icon-success: #4ade80;
+  --sp-icon-box-icon-warning: #ffc21a;
+  --sp-icon-box-icon-danger: #f87171;
+}
 @layer base {
 
   *,