@luxflow/tokens 0.2.0

package/README.md

@@ -0,0 +1,17 @@
+# @luxflow/tokens
+
+Design tokens for LuxFlow UI system.
+
+## Usage
+
+```tsx
+import '@luxflow/tokens/tokens.css';
+import '@luxflow/tokens/theme.css';
+```
+
+## Tokens
+
+- Colors: `--bg`, `--surface`, `--text`, `--titles`, `--border`, `--accent`
+- Spacing: `--gap-*`, `--padding-*`
+- Radius: `--radius-*`
+- Shadows: `--shadow-*`

package/package.json

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

package/src/compat.css

@@ -0,0 +1,51 @@
+/* LuxFlow Compat Aliases: --lf-* → bare (ADR-008) */
+@import './contract.css';
+:root {
+  --bg: var(--lf-bg); --surface: var(--lf-surface-1); --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);
+  --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);
+  --padding-lg: var(--lf-padding-lg); --padding-xl: var(--lf-padding-xl);
+  --margin-sm: var(--lf-margin-sm); --margin-lg: var(--lf-margin-lg);
+  --padding-container: var(--lf-padding-container);
+  --padding-section-sm: var(--lf-padding-section-sm);
+  --padding-section-md: var(--lf-padding-section-md);
+  --padding-section-lg: var(--lf-padding-section-lg);
+  --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);
+  --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);
+  --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);
+  --radius-xs: var(--lf-radius-xs);
+  --radius-sm: var(--lf-radius-sm); --radius-md: var(--lf-radius-md);
+  --radius-lg: var(--lf-radius-lg); --radius-xl: var(--lf-radius-xl);
+  --radius-2xl: var(--lf-radius-2xl); --radius-full: var(--lf-radius-full);
+  --shadow-sm: var(--lf-shadow-sm); --shadow-md: var(--lf-shadow-md);
+  --shadow-lg: var(--lf-shadow-lg); --shadow-xl: var(--lf-shadow-xl);
+  --z-base: var(--lf-z-base); --z-raised: var(--lf-z-raised);
+  --z-dropdown: var(--lf-z-dropdown); --z-sticky: var(--lf-z-sticky);
+  --z-header: var(--lf-z-header); --z-modal: var(--lf-z-modal);
+  --z-overlay: var(--lf-z-overlay); --z-toast: var(--lf-z-toast);
+  --font-sans: var(--lf-font-sans);
+  --margin-md: var(--lf-margin-md); --margin-xl: var(--lf-margin-xl);
+  --motion-duration-fast: var(--lf-motion-duration-fast);
+  --motion-duration-normal: var(--lf-motion-duration-normal);
+  --motion-duration-slow: var(--lf-motion-duration-slow);
+  --motion-easing-default: var(--lf-motion-easing-default);
+  --motion-easing-in: var(--lf-motion-easing-in);
+  --motion-easing-out: var(--lf-motion-easing-out);
+  --motion-easing-in-out: var(--lf-motion-easing-in-out);
+  --transition-all: var(--lf-transition);
+}

package/src/components.css

@@ -0,0 +1,21 @@
+/**
+ * @luxflow/tokens/components.css — DEPRECATED (ADR-009)
+ *
+ * Component CSS has been MOVED to @luxflow/ui/styles/components.css.
+ *
+ * @luxflow/tokens NOW OWNS ONLY:
+ *   - contract.css     (canonical --lf-* variables)
+ *   - compat.css       (bare aliases → --lf-*)
+ *   - semantics.css    (utility classes consuming --lf-*)
+ *   - theme.template.css (project theme starter)
+ *
+ * MIGRATION (required):
+ *   - Replace `@import '@luxflow/tokens/components.css'`
+ *     with    `@import '@luxflow/ui/styles/components.css'`
+ *
+ * This stub remains empty intentionally. Anything still importing it
+ * will lose component styles — surface the migration loudly.
+ *
+ * Removal target: next minor release of @luxflow/tokens.
+ */
+

package/src/contract.css

@@ -0,0 +1,118 @@
+/**
+ * LuxFlow Tokens Contract
+ * Defines the CANONICAL --lf-* variables that all LuxFlow themes must provide.
+ * See: ADR-008-theme-variable-canon-luxflow.md
+ */
+
+:root {
+  /* ==================== COLORS ==================== */
+  --lf-bg: #0a0a0a;
+  --lf-surface-1: #121212;
+  --lf-surface-2: #1a1a1a;
+  --lf-surface-3: #222222;
+  --lf-text: #cccccc;
+  --lf-foreground: var(--lf-text);
+  --lf-titles: #ffffff;
+  --lf-muted: #999999;
+  --lf-muted-foreground: var(--lf-muted);
+  --lf-border: #2a2a2a;
+  --lf-accent: #4a90e2;
+  --lf-ring: var(--lf-accent);
+
+  /* Status */
+  --lf-success: #10b981;
+  --lf-warning: #f59e0b;
+  --lf-danger: #ef4444;
+  --lf-info: #3b82f6;
+
+  /* ==================== 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;
+
+  --lf-margin-sm: 0.5rem;
+  --lf-margin-md: 1rem;
+  --lf-margin-lg: 2rem;
+  --lf-margin-xl: 3rem;
+
+  --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;
+
+  /* ==================== TYPOGRAPHY ==================== */
+  --lf-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
+
+  --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-font-light: 300;
+  --lf-font-normal: 400;
+  --lf-font-medium: 500;
+  --lf-font-semibold: 600;
+  --lf-font-bold: 700;
+
+  --lf-leading-tight: 1.25;
+
+  /* ==================== 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);
+
+  /* ==================== EFFECTS ==================== */
+  --lf-blur-md: blur(8px);
+  --lf-transition: all 0.2s ease;
+
+  /* ==================== 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);
+}

package/src/semantics.css

@@ -0,0 +1,150 @@
+/**
+ * LuxFlow Semantic Classes
+ * UI components use these classes which reference contract variables.
+ */
+
+@import './contract.css';
+
+/* Base */
+body {
+  font-family: Inter, system-ui, sans-serif;
+  background: var(--lf-bg);
+  color: var(--lf-text);
+  margin: 0;
+  padding: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--lf-titles);
+}
+
+/* Layout */
+.lf-app {
+  background: var(--lf-bg);
+  color: var(--lf-text);
+}
+
+.lf-surface {
+  background: var(--lf-surface-1);
+  border: 1px solid var(--lf-border);
+}
+
+.lf-surface-2 {
+  background: var(--lf-surface-2);
+}
+
+.lf-surface-3 {
+  background: var(--lf-surface-3);
+}
+
+.lf-card {
+  background: var(--lf-surface-1);
+  border: 1px solid var(--lf-border);
+  border-radius: var(--lf-radius-md);
+  padding: var(--lf-padding-lg);
+}
+
+.lf-panel {
+  background: var(--lf-surface-1);
+  border: 1px solid var(--lf-border);
+  padding: var(--lf-padding-md);
+}
+
+/* Typography */
+.lf-text {
+  color: var(--lf-text);
+}
+
+.lf-titles {
+  color: var(--lf-titles);
+}
+
+.lf-muted {
+  color: var(--lf-muted);
+}
+
+/* Button */
+.lf-btn {
+  padding: var(--lf-padding-sm) var(--lf-padding-md);
+  border-radius: var(--lf-radius-sm);
+  font-family: inherit;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: var(--lf-transition);
+  border: 1px solid transparent;
+}
+
+.lf-btn-primary {
+  background: var(--lf-accent);
+  color: #ffffff;
+  border-color: var(--lf-accent);
+}
+
+.lf-btn-primary:hover {
+  opacity: 0.9;
+}
+
+.lf-btn-secondary {
+  background: var(--lf-surface-1);
+  color: var(--lf-text);
+  border-color: var(--lf-border);
+}
+
+.lf-btn-secondary:hover {
+  background: var(--lf-surface-2);
+}
+
+.lf-btn-ghost {
+  background: transparent;
+  color: var(--lf-text);
+}
+
+.lf-btn-ghost:hover {
+  background: var(--lf-surface-1);
+}
+
+/* Badge */
+.lf-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--lf-radius-sm);
+  font-size: 0.875rem;
+  display: inline-block;
+}
+
+.lf-badge-success {
+  background: var(--lf-success);
+  color: #ffffff;
+}
+
+.lf-badge-warning {
+  background: var(--lf-warning);
+  color: #ffffff;
+}
+
+.lf-badge-danger {
+  background: var(--lf-danger);
+  color: #ffffff;
+}
+
+.lf-badge-default {
+  background: var(--lf-muted);
+  color: #ffffff;
+}
+
+/* Border */
+.lf-border {
+  border-color: var(--lf-border);
+}
+
+/* Modal */
+.lf-modal-backdrop {
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: var(--lf-blur-md);
+}
+
+.lf-modal {
+  background: var(--lf-surface-1);
+  border: 1px solid var(--lf-border);
+  border-radius: var(--lf-radius-lg);
+  box-shadow: var(--lf-shadow-xl);
+}

package/src/theme.template.css

@@ -0,0 +1,151 @@
+/**
+ * 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.
+ */
+
+:root {
+  /* ============================================
+     BASE COLORS (Dark Theme Default)
+     ============================================ */
+  
+  --lf-bg: #0b0b0d;
+  --lf-surface-1: #141317;
+  --lf-surface-2: #1a1a1e;
+  --lf-surface-3: #202024;
+  --lf-text: #c5ccd6;
+  --lf-titles: #ffffff;
+  --lf-muted: #9ca3af;
+  --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-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-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-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
+     ============================================ */
+  
+  --lf-blur-md: blur(8px);
+  --lf-transition: all 0.2s ease;
+  
+  /* ============================================
+     Z-INDEX
+     ============================================ */
+  
+  --lf-z-modal: 50;
+  --lf-z-overlay: 60;
+  --lf-z-toast: 70;
+}
+
+/* ============================================
+   LIGHT THEME (Optional)
+   ============================================ */
+
+/*
+[data-theme="light"] {
+  --lf-bg: #f8f8f8;
+  --lf-surface-1: #ffffff;
+  --lf-surface-2: #f5f5f5;
+  --lf-surface-3: #eeeeee;
+  --lf-text: #333333;
+  --lf-titles: #111111;
+  --lf-muted: #666666;
+  --lf-border: #e5e7eb;
+  
+  --lf-neutral-1: #f1f2f4;
+  --lf-neutral-2: #e6e8eb;
+  --lf-neutral-3: #d1d5db;
+}
+*/
+
+/* ============================================
+   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
+*/
+
+/*
+[data-brand="alt"] {
+  --lf-accent: #ff6b6b;
+}
+
+[data-brand="pro"] {
+  --lf-accent: #9333ea;
+}
+
+[data-brand="enterprise"] {
+  --lf-accent: #0ea5e9;
+}
+*/

package/src/vendor-themes.css

@@ -0,0 +1,723 @@
+/* ============================================
+   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

@@ -0,0 +1,98 @@
+/* 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;
+}