@luxflow/tokens 0.2.0 → 1.0.0

package/README.md

@@ -1,17 +1,89 @@
 # @luxflow/tokens
 
-Design tokens for LuxFlow UI system.
+CSS design tokens for LuxFlow. Source de vérité pour toutes les variables `--lf-*`.
 
-## Usage
+## Exports
 
-```tsx
-import '@luxflow/tokens/tokens.css';
-import '@luxflow/tokens/theme.css';
+| Export | Rôle |
+|--------|------|
+| `@luxflow/tokens/contract.css` | **91 variables `--lf-*` canoniques** — source de vérité |
+| `@luxflow/tokens/compat.css` | Aliases bare (`--bg`, `--primary`, etc.) → `--lf-*` |
+| `@luxflow/tokens/semantics.css` | Classes utilitaires (`.lf-card`, `.lf-btn`, etc.) |
+| `@luxflow/tokens/theme.template.css` | Template d'override projet (couvre 91/91 vars) |
+| `@luxflow/tokens/package.json` | Le manifeste — exporté parce que plusieurs outils le lisent |
+
+### ⛔ Il n'y a PAS de point d'entrée racine, et c'est VOULU
+
+`import '@luxflow/tokens'` échoue en `ERR_PACKAGE_PATH_NOT_EXPORTED`. Ce n'est pas un oubli.
+
+**[mesuré le 23/08/2026]** Personne n'écrit `from '@luxflow/tokens'` — ni dans le monorepo, ni
+dans les projets consommateurs hors dépôt. Les **95 usages** sont tous des sous-chemins CSS :
+
+```
+43  @luxflow/tokens/semantics.css        6  @luxflow/tokens/compat.css
+41  @luxflow/tokens/contract.css         2  @luxflow/tokens/theme.template.css
+ 0  @luxflow/tokens          ← la racine
+```
+
+Ce paquet ne contient **aucun JavaScript**. Lui donner une clé `.` reviendrait à inventer un
+point d'entrée que personne ne demande, et qui devrait ensuite être maintenu. **L'absence est
+documentée ici précisément pour qu'elle ne se lise pas comme un défaut** — un
+`ERR_PACKAGE_PATH_NOT_EXPORTED` non expliqué finit toujours par être « corrigé ».
+
+### `components.css` n'est PAS exporté — également voulu
+
+Il existe dans le tarball (`files: ["src/*.css"]` l'embarque) mais il est **hors carte** : c'est
+un stub *deprecated* (ADR-009), remplacé par `@luxflow/ui/styles/components.css`. Les trois
+mentions qui en restent dans le dépôt sont des **interdictions**, pas des usages.
+
+## Import order canonique
+
+```css
+@import '@luxflow/tokens/contract.css';
+@import '@luxflow/tokens/compat.css';
+@import '@luxflow/ui/styles/components.css';
+@import '@luxflow/tokens/semantics.css';
+
+/* Puis dans theme/theme.css : overrides --lf-* uniquement */
+:root {
+  --lf-accent: #votre-couleur;
+}
+```
+
+## Créer un thème projet
+
+```bash
+cp node_modules/@luxflow/tokens/src/theme.template.css theme/theme.css
 ```
 
-## Tokens
+## Tokens disponibles (102 variables `--lf-*`)
+
+- **Colors** : `--lf-bg`, `--lf-surface-1/2/3`, `--lf-text`, `--lf-titles`, `--lf-accent`, `--lf-accent-hover/-foreground/-ghost`, `--lf-border`, `--lf-muted`
+- **Status** : `--lf-success`, `--lf-warning`, `--lf-danger`, `--lf-info`, `--lf-on-*`, `--lf-*-bg`
+- **Spacing** : `--lf-gap-*`, `--lf-padding-*`, `--lf-margin-*`, `--lf-padding-section-*`
+- **Containers** : `--lf-container-sm/md/lg/xl/nav`
+- **Typography** : `--lf-font-sans`, `--lf-font-heading`, `--lf-font-mono`, `--lf-text-h1..h6`, `--lf-font-*`, `--lf-leading-tight/normal/relaxed`
+- **Radius** : `--lf-radius-xs/sm/md/lg/xl/2xl/full`
+- **Shadows** : `--lf-shadow-sm/md/lg/xl`
+- **Z-index** : `--lf-z-base/raised/dropdown/sticky/header/modal/overlay/toast`
+- **Motion** : `--lf-motion-duration-*`, `--lf-motion-easing-*`
+
+## Les 11 élargissements du contrat (T-005, 18/08/2026)
+
+Le contrat est passé de 91 à 102 variables. Chaque ajout répond à un usage **mesuré dans le
+dépôt**, pas à une anticipation. Les valeurs par défaut sont dérivées quand c'est possible, pour
+qu'un thème qui surcharge `--lf-accent` seul reste cohérent.
+
+| Variable | Défaut | Justification |
+| --- | --- | --- |
+| `--lf-success-bg` `--lf-warning-bg` `--lf-danger-bg` `--lf-info-bg` | `color-mix(in srgb, var(--lf-X) 10%, transparent)` | 13 usages réclamaient une **teinte** de statut (`rgba(…, 0.1)` avec la couleur pleine sur la bordure ou le texte). Le contrat avait les couleurs de statut et leurs contrastes, jamais leurs fonds. |
+| `--lf-accent-hover` | `color-mix(in srgb, var(--lf-accent) 90%, black)` | Deux projets l'ont inventée indépendamment (`iae-sport-site`, `test-landing`). **Réserve : ce défaut assombrit.** Un thème sombre dont le survol doit éclaircir la surcharge — `iae-sport-site` le fait déjà (`#e0952a` en clair, `#ffb347` en sombre). |
+| `--lf-accent-foreground` | `#ffffff` | Déclarée par `iae-sport-site`. **Le défaut suppose un accent sombre** ; avec un accent clair il faut le surcharger — `iae-sport-site` utilise `#111111`. |
+| `--lf-accent-ghost` | `color-mix(… 12%, transparent)` | Couvre trois usages distincts d'`apps/os` : anneau de focus, fond de survol, fond d'état actif. |
+| `--lf-font-heading` | `var(--lf-font-sans)` | Défaut neutre : un thème qui ne la surcharge pas garde une seule police. |
+| `--lf-font-mono` | `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace` | Le besoin existait sous trois formes concurrentes, dont six références à un `--font-mono` sans préfixe qui tombaient sur la police système. |
+| `--lf-leading-normal` `--lf-leading-relaxed` | `1.5` `1.7` | Le contrat n'avait que `--lf-leading-tight`. Le `1.7` est le fallback déjà utilisé par les templates. |
+
+## Documentation complète
 
-- Colors: `--bg`, `--surface`, `--text`, `--titles`, `--border`, `--accent`
-- Spacing: `--gap-*`, `--padding-*`
-- Radius: `--radius-*`
-- Shadows: `--shadow-*`
+`docs/TOKENS_THEME_CONTRACT.md`

package/package.json

@@ -1,15 +1,17 @@
 {
   "name": "@luxflow/tokens",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "exports": {
     "./contract.css": "./src/contract.css",
     "./semantics.css": "./src/semantics.css",
+    "./compat.css": "./src/compat.css",
     "./theme.template.css": "./src/theme.template.css",
-    "./vendor-themes.css": "./src/vendor-themes.css",
-    "./vendor-variables.css": "./src/vendor-variables.css"
+    "./package.json": "./package.json"
   },
-  "files": ["src/*.css"],
+  "files": [
+    "src/*.css"
+  ],
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/compat.css

@@ -1,12 +1,13 @@
 /* LuxFlow Compat Aliases: --lf-* → bare (ADR-008) */
 @import './contract.css';
 :root {
-  --bg: var(--lf-bg); --surface: var(--lf-surface-1); --text: var(--lf-text);
+  --bg: var(--lf-bg); --surface: var(--lf-surface-1); --surface-2: var(--lf-surface-2); --surface-3: var(--lf-surface-3); --text: var(--lf-text);
   --foreground: var(--lf-foreground); --titles: var(--lf-titles);
   --muted: var(--lf-muted); --muted-foreground: var(--lf-muted-foreground);
   --border: var(--lf-border); --primary: var(--lf-accent); --accent: var(--lf-accent);
   --ring: var(--lf-ring); --success: var(--lf-success); --warning: var(--lf-warning);
   --error: var(--lf-danger); --destructive: var(--lf-danger); --info: var(--lf-info);
+  --on-success: var(--lf-on-success); --on-warning: var(--lf-on-warning); --on-error: var(--lf-on-error);
   --gap-2xs: var(--lf-gap-2xs); --gap-xs: var(--lf-gap-xs); --gap-sm: var(--lf-gap-sm);
   --gap-md: var(--lf-gap-md); --gap-lg: var(--lf-gap-lg); --gap-xl: var(--lf-gap-xl);
   --padding-sm: var(--lf-padding-sm); --padding-md: var(--lf-padding-md);
@@ -19,12 +20,14 @@
   --padding-section-xl: var(--lf-padding-section-xl);
   --container-sm: var(--lf-container-sm); --container-md: var(--lf-container-md);
   --container-lg: var(--lf-container-lg); --container-xl: var(--lf-container-xl);
+  --container-nav: var(--lf-container-nav);
   --text-h1: var(--lf-text-h1); --text-h2: var(--lf-text-h2);
   --text-h3: var(--lf-text-h3); --text-h4: var(--lf-text-h4);
   --text-h5: var(--lf-text-h5); --text-h6: var(--lf-text-h6);
   --text-display-lg: var(--lf-text-display-lg);
   --text-body: var(--lf-text-body); --text-body-lg: var(--lf-text-body-lg);
   --text-small: var(--lf-text-small); --text-tiny: var(--lf-text-tiny);
+  --text-form: var(--lf-text-form);
   --font-light: var(--lf-font-light); --font-normal: var(--lf-font-normal);
   --font-medium: var(--lf-font-medium); --font-semibold: var(--lf-font-semibold);
   --font-bold: var(--lf-font-bold); --leading-tight: var(--lf-leading-tight);

package/src/contract.css

@@ -18,6 +18,13 @@
   --lf-border: #2a2a2a;
   --lf-accent: #4a90e2;
   --lf-ring: var(--lf-accent);
+  /* Accent nuances — derived, so overriding --lf-accent alone stays coherent.
+     Reserve: the hover default darkens. A dark theme whose hover should LIGHTEN
+     must override it, as iae-sport-site does (#e0952a light / #ffb347 dark). */
+  --lf-accent-hover: color-mix(in srgb, var(--lf-accent) 90%, black);
+  /* Default assumes a dark accent. Override with a light accent — iae-sport-site uses #111111. */
+  --lf-accent-foreground: #ffffff;
+  --lf-accent-ghost: color-mix(in srgb, var(--lf-accent) 12%, transparent);
 
   /* Status */
   --lf-success: #10b981;
@@ -25,6 +32,17 @@
   --lf-danger: #ef4444;
   --lf-info: #3b82f6;
 
+  /* Status backgrounds — ~10% tint, paired with the full status colour on text or border */
+  --lf-success-bg: color-mix(in srgb, var(--lf-success) 10%, transparent);
+  --lf-warning-bg: color-mix(in srgb, var(--lf-warning) 10%, transparent);
+  --lf-danger-bg: color-mix(in srgb, var(--lf-danger) 10%, transparent);
+  --lf-info-bg: color-mix(in srgb, var(--lf-info) 10%, transparent);
+
+  /* Status contrast (text on status backgrounds) */
+  --lf-on-success: #ffffff;
+  --lf-on-warning: #ffffff;
+  --lf-on-error: #ffffff;
+
   /* ==================== SPACING ==================== */
   --lf-gap-2xs: 0.125rem;
   --lf-gap-xs: 0.25rem;
@@ -53,9 +71,13 @@
   --lf-container-md: 768px;
   --lf-container-lg: 1024px;
   --lf-container-xl: 1280px;
+  --lf-container-nav: 1200px;
 
   /* ==================== TYPOGRAPHY ==================== */
   --lf-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
+  /* Defaults to the body font: a theme that does not override it keeps a single typeface. */
+  --lf-font-heading: var(--lf-font-sans);
+  --lf-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 
   --lf-text-h1: 3rem;
   --lf-text-h2: 2.5rem;
@@ -68,6 +90,7 @@
   --lf-text-body-lg: 1.5rem;
   --lf-text-small: 1rem;
   --lf-text-tiny: 0.75rem;
+  --lf-text-form: 0.875rem;
 
   --lf-font-light: 300;
   --lf-font-normal: 400;
@@ -76,6 +99,8 @@
   --lf-font-bold: 700;
 
   --lf-leading-tight: 1.25;
+  --lf-leading-normal: 1.5;
+  --lf-leading-relaxed: 1.7;
 
   /* ==================== BORDER RADIUS ==================== */
   --lf-radius-xs: 0.125rem;

package/src/theme.template.css

@@ -1,112 +1,165 @@
 /**
- * LuxFlow Theme Template (Vendor-like Structure)
- * Copy this file to your app and customize values.
- * Import AFTER contract.css and semantics.css.
- * 
- * Inspired by Vendor design system structure while maintaining LuxFlow contract.
+ * LuxFlow Theme Template
+ * ─────────────────────────────────────────────────────────────
+ * Copy this file to your project as `theme/theme.css`.
+ * Customize the values in :root to match your brand.
+ *
+ * Import order (in your project's CSS entry point):
+ *   1. @import '@luxflow/tokens/contract.css';
+ *   2. @import '@luxflow/tokens/compat.css';
+ *   3. @import '@luxflow/ui/styles/components.css';
+ *   4. @import '@luxflow/tokens/semantics.css';
+ *   5. @import './theme/theme.css';   ← this file (pure overrides)
+ *
+ * Rules:
+ *   - Only override variables declared in contract.css
+ *   - Never add variables outside the --lf-* contract here
+ *   - Never import vendor-themes.css or vendor-variables.css
+ *
+ * See: docs/TOKENS_THEME_CONTRACT.md
  */
 
 :root {
-  /* ============================================
-     BASE COLORS (Dark Theme Default)
-     ============================================ */
-  
+  /* ==================== COLORS ==================== */
+
   --lf-bg: #0b0b0d;
   --lf-surface-1: #141317;
   --lf-surface-2: #1a1a1e;
   --lf-surface-3: #202024;
   --lf-text: #c5ccd6;
+  --lf-foreground: var(--lf-text);
   --lf-titles: #ffffff;
   --lf-muted: #9ca3af;
+  --lf-muted-foreground: var(--lf-muted);
   --lf-border: #1f1f23;
-  
-  /* ============================================
-     BRAND / ACCENT
-     ============================================ */
-  
   --lf-accent: #5cb9f2;
-  
-  /* ============================================
-     NEUTRAL VARIANTS (Subtle backgrounds)
-     ============================================ */
-  
-  --lf-neutral-1: #111216;
-  --lf-neutral-2: #1a1b20;
-  --lf-neutral-3: #22232a;
-  
-  /* ============================================
-     STATUS COLORS
-     ============================================ */
-  
+  --lf-ring: var(--lf-accent);
+  --lf-accent-hover: color-mix(in srgb, var(--lf-accent) 90%, black);
+  --lf-accent-foreground: #ffffff;
+  --lf-accent-ghost: color-mix(in srgb, var(--lf-accent) 12%, transparent);
+
+  /* ==================== STATUS ==================== */
+
   --lf-success: #10b981;
   --lf-warning: #f59e0b;
   --lf-danger: #ef4444;
   --lf-info: #3b82f6;
-  
-  /* ============================================
-     SPACING (8px-based scale)
-     ============================================ */
-  
-  --lf-gap-sm: 0.5rem;    /* 8px */
-  --lf-gap-md: 1rem;      /* 16px */
-  --lf-gap-lg: 1.5rem;    /* 24px */
-  --lf-gap-xl: 2rem;      /* 32px */
-  
+  --lf-success-bg: color-mix(in srgb, var(--lf-success) 10%, transparent);
+  --lf-warning-bg: color-mix(in srgb, var(--lf-warning) 10%, transparent);
+  --lf-danger-bg: color-mix(in srgb, var(--lf-danger) 10%, transparent);
+  --lf-info-bg: color-mix(in srgb, var(--lf-info) 10%, transparent);
+  --lf-on-success: #ffffff;
+  --lf-on-warning: #ffffff;
+  --lf-on-error: #ffffff;
+
+  /* ==================== SPACING ==================== */
+
+  --lf-gap-2xs: 0.125rem;
+  --lf-gap-xs: 0.25rem;
+  --lf-gap-sm: 0.5rem;
+  --lf-gap-md: 1rem;
+  --lf-gap-lg: 1.5rem;
+  --lf-gap-xl: 2rem;
+
   --lf-padding-sm: 0.5rem;
   --lf-padding-md: 1rem;
   --lf-padding-lg: 1.5rem;
   --lf-padding-xl: 2rem;
-  
-  /* Extended spacing (optional) */
-  --lf-space-1: 0.25rem;  /* 4px */
-  --lf-space-2: 0.5rem;   /* 8px */
-  --lf-space-3: 0.75rem;  /* 12px */
-  --lf-space-4: 1rem;     /* 16px */
-  --lf-space-5: 1.25rem;  /* 20px */
-  --lf-space-6: 1.5rem;   /* 24px */
-  --lf-space-8: 2rem;     /* 32px */
-  --lf-space-10: 2.5rem;  /* 40px */
-  --lf-space-12: 3rem;    /* 48px */
-  
-  /* ============================================
-     BORDER RADIUS
-     ============================================ */
-  
-  --lf-radius-sm: 0.25rem;   /* 4px */
-  --lf-radius-md: 0.5rem;    /* 8px */
-  --lf-radius-lg: 0.75rem;   /* 12px */
-  --lf-radius-xl: 1rem;      /* 16px */
-  --lf-radius-2xl: 1.25rem;  /* 20px */
-  
-  /* ============================================
-     SHADOWS
-     ============================================ */
-  
+
+  --lf-margin-sm: 0.5rem;
+  --lf-margin-md: 1rem;
+  --lf-margin-lg: 2rem;
+  --lf-margin-xl: 3rem;
+
+  /* ==================== CONTAINERS ==================== */
+
+  --lf-padding-container: 4rem;
+  --lf-padding-section-sm: 2rem;
+  --lf-padding-section-md: 4rem;
+  --lf-padding-section-lg: 6rem;
+  --lf-padding-section-xl: 8rem;
+
+  --lf-container-sm: 640px;
+  --lf-container-md: 768px;
+  --lf-container-lg: 1024px;
+  --lf-container-xl: 1280px;
+  --lf-container-nav: 1200px;
+
+  /* ==================== TYPOGRAPHY ==================== */
+
+  --lf-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --lf-font-heading: var(--lf-font-sans);
+  --lf-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+  --lf-text-h1: 3rem;
+  --lf-text-h2: 2.5rem;
+  --lf-text-h3: 1.5rem;
+  --lf-text-h4: 1.25rem;
+  --lf-text-h5: 1.125rem;
+  --lf-text-h6: 1rem;
+  --lf-text-display-lg: 6rem;
+  --lf-text-body: 1rem;
+  --lf-text-body-lg: 1.5rem;
+  --lf-text-small: 1rem;
+  --lf-text-tiny: 0.75rem;
+  --lf-text-form: 0.875rem;
+
+  --lf-font-light: 300;
+  --lf-font-normal: 400;
+  --lf-font-medium: 500;
+  --lf-font-semibold: 600;
+  --lf-font-bold: 700;
+
+  --lf-leading-tight: 1.25;
+  --lf-leading-normal: 1.5;
+  --lf-leading-relaxed: 1.7;
+
+  /* ==================== BORDER RADIUS ==================== */
+
+  --lf-radius-xs: 0.125rem;
+  --lf-radius-sm: 0.25rem;
+  --lf-radius-md: 0.5rem;
+  --lf-radius-lg: 0.75rem;
+  --lf-radius-xl: 1rem;
+  --lf-radius-2xl: 1.5rem;
+  --lf-radius-full: 9999px;
+
+  /* ==================== SHADOWS ==================== */
+
   --lf-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --lf-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
   --lf-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
   --lf-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
-  --lf-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.28);
-  
-  /* ============================================
-     EFFECTS
-     ============================================ */
-  
+
+  /* ==================== EFFECTS ==================== */
+
   --lf-blur-md: blur(8px);
   --lf-transition: all 0.2s ease;
-  
-  /* ============================================
-     Z-INDEX
-     ============================================ */
-  
+
+  /* ==================== Z-INDEX ==================== */
+
+  --lf-z-base: 0;
+  --lf-z-raised: 10;
+  --lf-z-dropdown: 20;
+  --lf-z-sticky: 30;
+  --lf-z-header: 40;
   --lf-z-modal: 50;
   --lf-z-overlay: 60;
   --lf-z-toast: 70;
+
+  /* ==================== MOTION ==================== */
+
+  --lf-motion-duration-fast: 0.1s;
+  --lf-motion-duration-normal: 0.2s;
+  --lf-motion-duration-slow: 0.4s;
+  --lf-motion-easing-default: ease;
+  --lf-motion-easing-in: ease-in;
+  --lf-motion-easing-out: ease-out;
+  --lf-motion-easing-in-out: ease-in-out;
+  --lf-motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-/* ============================================
-   LIGHT THEME (Optional)
-   ============================================ */
+/* ==================== LIGHT THEME (Optional override) ==================== */
 
 /*
 [data-theme="light"] {
@@ -118,34 +171,17 @@
   --lf-titles: #111111;
   --lf-muted: #666666;
   --lf-border: #e5e7eb;
-  
-  --lf-neutral-1: #f1f2f4;
-  --lf-neutral-2: #e6e8eb;
-  --lf-neutral-3: #d1d5db;
+  --lf-accent: #5cb9f2;
 }
 */
 
-/* ============================================
-   MULTI-BRAND (Optional, Not Default)
-   ============================================
-   
-   Use [data-brand="..."] for multi-tenant or
-   white-label apps. Single-brand apps should
-   NOT use this pattern.
-   
-   See: docs/MULTIBRAND_OPTION.md
-*/
-
+/* ==================== MULTI-BRAND (Optional) ==================== */
 /*
+   Use [data-brand="..."] for multi-tenant or white-label apps only.
+   Single-brand apps MUST NOT use this pattern.
+   See: docs/TOKENS_THEME_CONTRACT.md
+
 [data-brand="alt"] {
   --lf-accent: #ff6b6b;
 }
-
-[data-brand="pro"] {
-  --lf-accent: #9333ea;
-}
-
-[data-brand="enterprise"] {
-  --lf-accent: #0ea5e9;
-}
 */

package/src/vendor-themes.css

@@ -1,723 +0,0 @@
-/* ============================================
-   Vendor Design System - Core Themes & Variables
-   Architecture: Modulaire (composants dans src/components/)
-   ============================================ */
-
-/* ==================== BRAND COLORS ==================== */
-[data-brand="vendor-app"] { --primary: #ededed; }
-[data-brand="muzidev"] { --primary: #5cb9f2; }
-[data-brand="muzipics"] { --primary: #ff2d55; }
-[data-brand="muziweb"] { --primary: #9802eb; }
-[data-brand="muzimerch"] { --primary: #ff9d00; }
-[data-brand="muzibase"] { --primary: #2fad66; }
-[data-brand="muzisystem"] { --primary: #bfbfbf; }
-[data-brand="muzitools"] { --primary: #07e7c6; }
-
-:root {
-  /* ==================== 1. COLORS (Sémantiques) ==================== */
-  /* Base colors - Dark mode (default) */
-  --bg: #0b0b0d;
-  --surface: #141317;
-  --text: #c5ccd6;
-  --foreground: var(--text);
-  --titles: #ffffff;
-  --muted: #9ca3af;
-  --muted-foreground: var(--muted);
-  --border: #1f1f23;
-  --accent: var(--primary);
-  
-  /* Dark mode fixed values (for light theme overrides) */
-  --dark-bg: #0b0b0d;
-  --dark-surface: #141317;
-  --dark-text: #c5ccd6;
-  --dark-titles: #ffffff;
-  --dark-muted: #9ca3af;
-  --dark-border: #1f1f23;
-  
-  /* Component colors */
-  --card: var(--surface);
-  --card-foreground: var(--text);
-  --on-primary: #0b0b0d;
-  --ring: var(--primary);
-  
-  /* Status colors */
-  --success: #10b981;
-  --warning: #f59e0b;
-  --error: #ef4444;
-  --destructive: var(--error);
-  --info: #3b82f6;
-  
-  /* Navbar/Footer colors (simplified - use base tokens) */
-  --navbar-bg: var(--bg);
-  --navbar-surface: var(--surface);
-  --navbar-border: var(--border);
-  --navbar-text: var(--titles);
-  --footer-bg: var(--bg);
-  --footer-surface: var(--surface);
-  --footer-border: var(--border);
-  --footer-text: var(--titles);
-
-  /* ==================== 2. SPACING (Sémantiques) ==================== */
-  /* Layout spacing */
-  --padding-container: 4rem;
-  --padding-section-sm: 2rem;
-  --padding-section-md: 4rem;
-  --padding-section-lg: 6rem;
-  --padding-section-xl: 8rem;
-  
-  /* Component spacing - Gap (between elements) */
-  --gap-2xs: 0.125rem;  /* 2px */
-  --gap-xs: 0.25rem;    /* 4px */
-  --gap-sm: 0.5rem;     /* 8px */
-  --gap-md: 1rem;       /* 16px */
-  --gap-lg: 1.5rem;     /* 24px */
-  --gap-xl: 2rem;       /* 32px */
-  
-  /* Component spacing - Margin (around elements) */
-  --margin-sm: 0.5rem;
-  --margin-md: 1rem;
-  --margin-lg: 2rem;
-  --margin-xl: 3rem;
-
-  /* Component spacing - Padding (inside elements) */
-  --padding-xs: 0.25rem;  /* 4px */
-  --padding-sm: 0.5rem;   /* 8px */
-  --padding-md: 1rem;     /* 16px */
-  --padding-lg: 1.5rem;   /* 24px */
-  --padding-xl: 2rem;     /* 32px */
-  --padding-2xl: 3rem;    /* 48px */
-
-  /* ==================== 3. TYPOGRAPHY (Sémantiques) ==================== */
-  /* Font families */
-  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
-  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  
-  /* Headings */
-  --text-h1: 3rem;      /* 56px */
-  --text-h2: 2.5rem;        /* 48px */
-  --text-h3: 1.5rem;      /* 24px */
-  --text-h4: 1.25rem;     /* 20px */
-  --text-h5: 1.125rem;    /* 18px */
-  --text-h6: 1rem;        /* 16px */
-  
-  /* Display (hero titles) */
-  --text-display-sm: 3.75rem;  /* 60px */
-  --text-display-md: 4.5rem;   /* 72px */
-  --text-display-lg: 6rem;     /* 96px */
-  
-  /* Body text (paragraphs) */
-  --text-body: 1rem;       /* 16px */
-  --text-body-sm: 0.875rem; /* 14px - Small paragraphs */
-  --text-body-lg: 1.5rem;  /* 24px - Large paragraphs */
-  
-  /* Utility text (labels, captions, metadata) */
-  --text-small: 1rem;  /* 14px - Labels, captions */
-  --text-tiny: 0.75rem;    /* 12px - Metadata, badges */
-  
-  /* Font weights */
-  --font-thin: 100;
-  --font-extralight: 200;
-  --font-light: 300;
-  --font-normal: 400;
-  --font-medium: 500;
-  --font-semibold: 600;
-  --font-bold: 700;
-  --font-extrabold: 800;
-  --font-black: 900;
-  
-  /* Line heights */
-  --leading-none: 1;
-  --leading-tight: 1.25;
-  --leading-snug: 1.375;
-  --leading-normal: 1.5;
-  --leading-relaxed: 1.625;
-  --leading-loose: 2;
-  
-  /* Letter spacing */
-  --tracking-tighter: -0.05em;
-  --tracking-tight: -0.025em;
-  --tracking-normal: 0em;
-  --tracking-wide: 0.025em;
-  --tracking-wider: 0.05em;
-  --tracking-widest: 0.1em;
-
-  /* ==================== 4. DESIGN TOKENS ==================== */
-  /* Border radius */
-  --radius-xs: 0.125rem;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-2xl: 1.5rem;
-  --radius-full: 9999px;
-
-  /* Shadows */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-
-  /* Z-index */
-  --z-drawer: 40;
-  --z-modal: 50;
-  --z-popover: 60;
-  --z-toast: 70;
-
-  /* Motion */
-  --duration-100: 100ms;
-  --duration-150: 150ms;
-  --duration-200: 200ms;
-  --duration-300: 300ms;
-  --duration-500: 500ms;
-  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
-  
-  --transition-all: all 0.2s ease;
-  --transition-colors: color, background-color, border-color 0.2s ease;
-
-  /* ==================== 5. COMPONENT SIZES ==================== */
-  /* Widths */
-  --width-xs: 20rem;    /* 320px */
-  --width-sm: 24rem;    /* 384px */
-  --width-md: 28rem;    /* 448px */
-  --width-lg: 32rem;    /* 512px */
-  --width-xl: 36rem;    /* 576px */
-  --width-2xl: 42rem;   /* 672px */
-  --width-3xl: 48rem;   /* 768px */
-  --width-4xl: 56rem;   /* 896px */
-  --width-5xl: 64rem;   /* 1024px */
-  --width-6xl: 72rem;   /* 1152px */
-  --width-7xl: 80rem;   /* 1280px */
-  --width-full: 100%;
-  --width-screen: 100vw;
-
-  /* Heights */
-  --height-xs: 20rem;   /* 320px */
-  --height-sm: 24rem;   /* 384px */
-  --height-md: 28rem;   /* 448px */
-  --height-lg: 32rem;   /* 512px */
-  --height-xl: 36rem;   /* 576px */
-  --height-2xl: 42rem;  /* 672px */
-  --height-3xl: 48rem;  /* 768px */
-  --height-full: 100%;
-  --height-screen: 100vh;
-
-  /* Border widths */
-  --border-width-0: 0;
-  --border-width-1: 1px;
-  --border-width-2: 2px;
-  --border-width-3: 3px;
-  --border-width-4: 4px;
-  --border-width-8: 8px;
-
-  /* Opacity */
-  --opacity-0: 0;
-  --opacity-5: 0.05;
-  --opacity-10: 0.1;
-  --opacity-20: 0.2;
-  --opacity-25: 0.25;
-  --opacity-30: 0.3;
-  --opacity-40: 0.4;
-  --opacity-50: 0.5;
-  --opacity-60: 0.6;
-  --opacity-70: 0.7;
-  --opacity-75: 0.75;
-  --opacity-80: 0.8;
-  --opacity-90: 0.9;
-  --opacity-95: 0.95;
-  --opacity-100: 1;
-}
-
-/* ==================== LIGHT THEME (Override base colors) ==================== */
-[data-theme="light"] {
-  --bg: #f7f8fa;
-  --surface: #ffffff;
-  --text: #1f2937;
-  --foreground: var(--text);
-  --titles: #0E1116;
-  --muted: #6b7280;
-  --muted-foreground: var(--muted);
-  --border: #e5e7eb;
-}
-
-/* ==================== LIGHT THEME - SPECIAL RULES ==================== */
-
-/* Light brands (vendor-app, muzisystem) - Primary buttons */
-/* Primary buttons need dark background to be visible on light bg */
-[data-theme="light"][data-brand="vendor-app"] .btn-primary,
-[data-theme="light"][data-brand="muzisystem"] .btn-primary {
-  background-color: var(--dark-bg) !important;
-  color: var(--dark-titles) !important;
-}
-
-/* Semi-light rule: Force dark navbar and footer in light theme */
-[data-theme="light"] .navbar,
-[data-theme="light"] .footer {
-  background-color: var(--dark-bg) !important;
-  border-bottom-color: var(--dark-border) !important;
-  border-top-color: var(--dark-border) !important;
-  /* Force dark theme variables for footer text colors */
-  --text: var(--dark-text);
-  --muted: var(--dark-muted);
-  --titles: var(--dark-titles);
-}
-
-/* Textes navbar - Sélecteurs spécifiques (blanc) */
-[data-theme="light"] .navbar-brand,
-[data-theme="light"] .navbar-link,
-[data-theme="light"] .navbar-menu-link,
-[data-theme="light"] .navbar-toggle,
-[data-theme="light"] .navbar select,
-[data-theme="light"] .navbar input,
-[data-theme="light"] .navbar label,
-[data-theme="light"] .navbar span,
-[data-theme="light"] .navbar p,
-[data-theme="light"] .navbar a {
-  color: #ffffff !important;
-}
-
-/* Footer - Titres et liens en blanc, textes gardent var(--text)/var(--muted) */
-[data-theme="light"] .footer-logo,
-[data-theme="light"] .footer-link,
-[data-theme="light"] .footer-column-title {
-  color: #ffffff !important;
-}
-
-/* Liens hover */
-[data-theme="light"] .navbar-link:hover,
-[data-theme="light"] .navbar-menu-link:hover,
-[data-theme="light"] .footer-link:hover {
-  color: var(--primary) !important;
-}
-
-/* Borders dark dans navbar/footer */
-[data-theme="light"] .navbar-menu,
-[data-theme="light"] .footer-top {
-  background-color: var(--dark-bg) !important;
-  border-color: #1f1f23 !important;
-}
-
-[data-theme="light"] .footer-separator {
-  background: #1f1f23 !important;
-}
-
-[data-theme="light"] .navbar-menu-link:hover {
-  background-color: #141317 !important;
-}
-
-/* Force dark inputs, selects in navbar/footer */
-[data-theme="light"] .navbar input,
-[data-theme="light"] .navbar select,
-[data-theme="light"] .footer input,
-[data-theme="light"] .footer select,
-[data-theme="light"] .footer-newsletter-input {
-  background-color: #141317 !important;
-  border-color: #1f1f23 !important;
-  color: #ffffff !important;
-}
-
-/* Buttons in navbar (except primary) */
-[data-theme="light"] .navbar button:not(.btn-primary),
-[data-theme="light"] .footer button:not(.btn-primary):not(.footer-newsletter-button) {
-  background-color: #141317 !important;
-  border-color: #1f1f23 !important;
-  color: #ffffff !important;
-}
-
-/* Primary buttons keep their brand color */
-[data-theme="light"] .footer .btn-primary,
-[data-theme="light"] .footer-newsletter-button {
-  background-color: var(--primary) !important;
-  border-color: var(--primary) !important;
-}
-
-/* Light brands need dark text for contrast */
-[data-theme="light"][data-brand="vendor-app"] .footer .btn-primary,
-[data-theme="light"][data-brand="vendor-app"] .footer-newsletter-button,
-[data-theme="light"][data-brand="muzisystem"] .footer .btn-primary,
-[data-theme="light"][data-brand="muzisystem"] .footer-newsletter-button {
-  color: #0b0b0d !important;
-}
-
-/* Dark brands can use white text */
-[data-theme="light"][data-brand="muzidev"] .footer .btn-primary,
-[data-theme="light"][data-brand="muzidev"] .footer-newsletter-button,
-[data-theme="light"][data-brand="muzipics"] .footer .btn-primary,
-[data-theme="light"][data-brand="muzipics"] .footer-newsletter-button,
-[data-theme="light"][data-brand="muziweb"] .footer .btn-primary,
-[data-theme="light"][data-brand="muziweb"] .footer-newsletter-button,
-[data-theme="light"][data-brand="muzimerch"] .footer .btn-primary,
-[data-theme="light"][data-brand="muzimerch"] .footer-newsletter-button,
-[data-theme="light"][data-brand="muzibase"] .footer .btn-primary,
-[data-theme="light"][data-brand="muzibase"] .footer-newsletter-button {
-  color: #ffffff !important;
-}
-
-/* Privacy Policy et autres liens dans disclaimer toujours en primary */
-[data-theme="light"] .footer-newsletter-disclaimer a,
-.footer-newsletter-disclaimer a {
-  color: var(--primary) !important;
-}
-
-[data-theme="light"] .navbar-toggle {
-  background-color: transparent !important;
-}
-
-[data-theme="light"] .navbar-toggle span {
-  background-color: var(--primary) !important;
-}
-
-[data-theme="light"] .navbar-menu-actions {
-  border-top-color: #1f1f23 !important;
-}
-
-/* ==================== GLOBAL STYLES ==================== */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeLegibility;
-}
-
-body {
-  font-family: var(--font-sans);
-  background-color: var(--bg);
-  color: var(--text);
-  line-height: 1.5;
-  min-height: 100vh;
-}
-
-/* ==================== ANIMATIONS ==================== */
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-@keyframes fade-in {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(1rem);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-/* ==================== UTILITY CLASSES ==================== */
-
-/* Screen reader only */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-/* Typography utilities */
-.text-xs { font-size: var(--text-tiny); }
-.text-sm { font-size: var(--text-small); }
-.text-base { font-size: var(--text-body); }
-.text-lg { font-size: var(--text-body-lg); }
-.text-xl { font-size: var(--text-h5); }
-.text-2xl { font-size: var(--text-h4); }
-.text-3xl { font-size: var(--text-h3); }
-.text-6xl { font-size: var(--text-display-sm); }
-
-/* Font weight utilities */
-.font-normal { font-weight: var(--font-normal); }
-.font-medium { font-weight: var(--font-medium); }
-.font-semibold { font-weight: var(--font-semibold); }
-.font-bold { font-weight: var(--font-bold); }
-
-/* Border radius utilities */
-.rounded-sm { border-radius: var(--radius-sm); }
-.rounded-md { border-radius: var(--radius-md); }
-.rounded-lg { border-radius: var(--radius-lg); }
-.rounded-xl { border-radius: var(--radius-xl); }
-.rounded-full { border-radius: var(--radius-full); }
-
-/* Shadow utilities */
-.shadow-sm { box-shadow: var(--shadow-sm); }
-.shadow-md { box-shadow: var(--shadow-md); }
-.shadow-lg { box-shadow: var(--shadow-lg); }
-.shadow-xl { box-shadow: var(--shadow-xl); }
-
-/* Color utilities for status */
-.bg-error { background-color: var(--error); }
-.bg-success { background-color: var(--success); }
-.bg-warning { background-color: var(--warning); }
-.bg-info { background-color: var(--info); }
-
-.text-error { color: var(--error); }
-.text-success { color: var(--success); }
-.text-warning { color: var(--warning); }
-.text-info { color: var(--info); }
-
-/* ============================================
-   LAYOUT UTILITIES (Finsweet Structure)
-   ============================================ */
-
-/* Container - Max width + horizontal padding */
-.container {
-  max-width: var(--container-max-width, 1280px) !important;
-  margin-left: auto !important;
-  margin-right: auto !important;
-  padding-left: var(--gap-md) !important;
-  padding-right: var(--gap-md) !important;
-}
-
-@media (min-width: 768px) {
-  .container {
-    padding-left: var(--gap-xl) !important;
-    padding-right: var(--gap-xl) !important;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    padding-left: var(--padding-container) !important;
-    padding-right: var(--padding-container) !important;
-  }
-}
-
-/* Section - Vertical spacing */
-.section {
-  padding-top: var(--padding-section-md);
-  padding-bottom: var(--padding-section-md);
-}
-
-.section--sm {
-  padding-top: var(--padding-section-sm);
-  padding-bottom: var(--padding-section-sm);
-}
-
-.section--lg {
-  padding-top: var(--padding-section-lg);
-  padding-bottom: var(--padding-section-lg);
-}
-
-.section--xl {
-  padding-top: var(--padding-section-xl);
-  padding-bottom: var(--padding-section-xl);
-}
-
-/* Section actions (CTA buttons at bottom of sections) */
-.section-actions {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--gap-md);
-  margin-top: var(--gap-xl);
-  flex-wrap: wrap;
-}
-
-/* Grid utilities */
-.grid-2 {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--gap-xl);
-}
-
-.grid-3 {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--gap-xl);
-}
-
-.grid-4 {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: var(--gap-xl);
-}
-
-@media (max-width: 768px) {
-  .grid-2,
-  .grid-3,
-  .grid-4 {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* ============================================
-   Component styles are in src/components/
-   Import via src/index.css
-   ============================================ */
-
-/* ============================================
-   LEGACY ALIASES (⚠️ DEPRECATED - COMMENTED OUT)
-   Kept for reference only - DO NOT UNCOMMENT
-   Use semantic names instead:
-   - Spacing: --gap-*, --padding-*, --margin-*
-   - Typography: --text-h*, --text-body*, --text-display-*
-   - Colors: --foreground, --muted-foreground, --destructive
-   ============================================ */
-
-/*
-:root {
-  Legacy spacing
-  --space-2: 0.125rem;
-  --space-4: 0.25rem;
-  --space-6: 0.375rem;
-  --space-8: 0.5rem;
-  --space-12: 0.75rem;
-  --space-16: 1rem;
-  --space-20: 1.25rem;
-  --space-24: 1.5rem;
-  --space-32: 2rem;
-  --space-48: 3rem;
-  --space-64: 4rem;
-  --space-80: 5rem;
-  --space-96: 6rem;
-  --space-global-x: var(--padding-container);
-  --space-section-sm: var(--padding-section-sm);
-  --space-section-md: var(--padding-section-md);
-  --space-section-lg: var(--padding-section-lg);
-  --space-section-xl: var(--padding-section-xl);
-  
-  Legacy typography
-  --text-xs: var(--text-tiny);
-  --text-sm: var(--text-small);
-  --text-base: var(--text-body);
-  --text-lg: var(--text-body-lg);
-  --text-xl: var(--text-h5);
-  --text-2xl: var(--text-h4);
-  --text-3xl: var(--text-h3);
-  --text-4xl: var(--text-h2);
-  --text-5xl: var(--text-h1);
-  --text-6xl: var(--text-display-sm);
-  --text-7xl: var(--text-display-md);
-  --text-8xl: var(--text-display-lg);
-}
-*/
-.tag-cloud {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gap-md);
-  justify-content: center;
-  margin-bottom: var(--gap-xl);
-}
-
-/* ==================== ACCOUNT CENTER ==================== */
-.account-card {
-  max-width: 56rem;
-}
-
-.account-logo {
-  display: flex;
-  justify-content: center;
-  margin-bottom: var(--space-16);
-}
-
-.account-header-centered {
-  text-align: center;
-  margin-bottom: var(--space-32);
-}
-
-.account-tabs {
-  display: flex;
-  gap: var(--space-8);
-  margin-bottom: var(--space-24);
-  justify-content: center;
-}
-
-.account-profile-grid {
-  display: grid;
-  gap: var(--space-24);
-}
-
-.account-profile-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-8);
-}
-
-.account-profile-label {
-  font-size: 0.875rem;
-  opacity: 0.7;
-}
-
-.account-profile-value {
-  font-size: 1rem;
-}
-
-.account-empty-state {
-  text-align: center;
-  padding: var(--space-48) var(--space-24);
-}
-
-.account-empty-text {
-  font-size: 0.875rem;
-  opacity: 0.5;
-}
-
-.account-subscription-list {
-  display: grid;
-  gap: var(--space-16);
-}
-
-.account-subscription-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--space-12);
-}
-
-.account-subscription-name {
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-.account-subscription-details {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-8);
-}
-
-.account-subscription-info {
-  font-size: 0.875rem;
-  opacity: 0.7;
-}
-
-.account-subscription-warning {
-  font-size: 0.875rem;
-  color: var(--error);
-}
-
-.account-section {
-  margin-bottom: var(--space-24);
-}
-
-.account-section-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-bottom: var(--space-16);
-}
-
-.account-separator {
-  height: 1px;
-  background: var(--border);
-  margin: var(--gap-md) 0;
-}
-
-.account-footer {
-  margin-top: var(--gap-md);
-  display: flex;
-  justify-content: center;
-}

package/src/vendor-variables.css

@@ -1,98 +0,0 @@
-/* Extended CSS Variables - Factorized values */
-
-:root {
-  /* Animation variables - centralized timing */
-  --animation-duration: 0.2s;
-  --animation-duration-slow: 0.3s;
-  --animation-duration-fast: 0.15s;
-  --animation-easing: ease;
-  --animation-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  --animation-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
-
-  /* Shadow variables - consistent elevation */
-  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-2: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-  --shadow-3: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-4: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --shadow-5: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  --shadow-6: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-
-  /* Z-index scale - consistent layering */
-  --z-dropdown: 1000;
-  --z-sticky: 1020;
-  --z-fixed: 1030;
-  --z-modal-backdrop: 1040;
-  --z-modal: 1050;
-  --z-popover: 1060;
-  --z-tooltip: 1070;
-  --z-toast: 1080;
-
-  /* Border variables */
-  --border-width: 1px;
-  --border-width-thick: 2px;
-  --border-style: solid;
-
-  /* Opacity scale */
-  --opacity-disabled: 0.5;
-  --opacity-hover: 0.8;
-  --opacity-pressed: 0.9;
-
-  /* Transition patterns */
-  --transition-colors: color var(--animation-duration) var(--animation-easing),
-                      background-color var(--animation-duration) var(--animation-easing),
-                      border-color var(--animation-duration) var(--animation-easing);
-  
-  --transition-transform: transform var(--animation-duration) var(--animation-easing);
-  
-  --transition-opacity: opacity var(--animation-duration) var(--animation-easing);
-  
-  --transition-all: all var(--animation-duration) var(--animation-easing);
-
-  /* Status colors - semantic meaning */
-  --color-success: #4ade80;
-  --color-success-bg: rgba(34, 197, 94, 0.15);
-  
-  --color-warning: #fbbf24;
-  --color-warning-bg: rgba(245, 158, 11, 0.15);
-  
-  --color-error: #f87171;
-  --color-error-bg: rgba(239, 68, 68, 0.15);
-  
-  --color-info: #60a5fa;
-  --color-info-bg: rgba(59, 130, 246, 0.15);
-
-  /* Component sizing scale */
-  --size-xs: 1.5rem;   /* 24px */
-  --size-sm: 2rem;     /* 32px */
-  --size-md: 2.5rem;   /* 40px */
-  --size-lg: 3rem;     /* 48px */
-  --size-xl: 3.5rem;   /* 56px */
-  --size-2xl: 4rem;    /* 64px */
-
-  /* Content width constraints */
-  --content-width-xs: 20rem;    /* 320px */
-  --content-width-sm: 24rem;    /* 384px */
-  --content-width-md: 28rem;    /* 448px */
-  --content-width-lg: 32rem;    /* 512px */
-  --content-width-xl: 36rem;    /* 576px */
-  --content-width-2xl: 42rem;   /* 672px */
-  --content-width-3xl: 48rem;   /* 768px */
-  --content-width-4xl: 56rem;   /* 896px */
-  --content-width-5xl: 64rem;   /* 1024px */
-  --content-width-6xl: 72rem;   /* 1152px */
-  --content-width-7xl: 80rem;   /* 1280px */
-
-  /* Aspect ratios */
-  --aspect-square: 1 / 1;
-  --aspect-video: 16 / 9;
-  --aspect-photo: 4 / 3;
-  --aspect-golden: 1.618 / 1;
-
-  /* Line heights - typography scale */
-  --leading-none: 1;
-  --leading-tight: 1.25;
-  --leading-snug: 1.375;
-  --leading-normal: 1.5;
-  --leading-relaxed: 1.625;
-  --leading-loose: 2;
-}