@orion-ds/core 1.2.3 → 3.2.0

package/dist/theme.css

@@ -11,7 +11,255 @@
    GENERATED TOKENS — Auto-generated from JSON
    Includes: primitives, semantics, brand overrides
    ═══════════════════════════════════════════════════════════════════════════ */
-@import url('tokens/generated.css');
+/* Inlined: tokens/generated.css */
+/**
+ * ═══════════════════════════════════════════════════════════════════════════
+ * ORION DESIGN SYSTEM — Generated Tokens
+ * DO NOT EDIT MANUALLY - Generated from tokens/*.json
+ * Run: node scripts/build-tokens.js
+ * ═══════════════════════════════════════════════════════════════════════════
+ */
+
+/* ─── Primitives (from primary.json) ─── */
+:root {
+    /* Colors */
+    /* Brand: Orion (default) */
+    --color-brand-50: #e8f0ff;
+    --color-brand-100: #c7daff;
+    --color-brand-200: #a3c2ff;
+    --color-brand-300: #7ea9ff;
+    --color-brand-400: #5990ff;
+    --color-brand-500: #1B5BFF;
+    --color-brand-600: #1850e6;
+    --color-brand-700: #1544cc;
+    --color-brand-800: #1139b3;
+    --color-brand-900: #0d2d99;
+    --color-brand-950: #071a5c;
+
+    /* Neutral */
+    --color-neutral-0: #ffffff;
+    --color-neutral-50: #f8fafc;
+    --color-neutral-100: #f1f5f9;
+    --color-neutral-200: #e2e8f0;
+    --color-neutral-300: #cbd5e1;
+    --color-neutral-400: #94a3b8;
+    --color-neutral-500: #64748b;
+    --color-neutral-600: #475569;
+    --color-neutral-700: #334155;
+    --color-neutral-800: #1e293b;
+    --color-neutral-900: #0f172a;
+    --color-neutral-950: #020617;
+    --color-neutral-1000: #000000;
+
+    /* Status */
+    --color-error-500: #ef4444;
+    --color-success-500: #22c55e;
+    --color-warning-500: #eab308;
+
+    /* Typography */
+    --font-primary: Libre Baskerville, system-ui, sans-serif;
+    --font-secondary: Inter, system-ui, sans-serif;
+    --font-mono: JetBrains Mono, monospace;
+
+    /* Font Sizes */
+    --font-size-10: 10px;
+    --font-size-11: 11px;
+    --font-size-12: 12px;
+    --font-size-13: 13px;
+    --font-size-14: 14px;
+    --font-size-16: 16px;
+    --font-size-18: 18px;
+    --font-size-20: 20px;
+    --font-size-24: 24px;
+    --font-size-32: 32px;
+    --font-size-48: 48px;
+    --font-size-64: 64px;
+    --font-size-80: 80px;
+    --font-size-96: 96px;
+
+    /* Font Weights */
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+
+    /* Spacing (base: 4px) */
+    --spacing-0: 0px;
+    --spacing-1: 4px;
+    --spacing-2: 8px;
+    --spacing-3: 12px;
+    --spacing-4: 16px;
+    --spacing-5: 20px;
+    --spacing-6: 24px;
+    --spacing-7: 28px;
+    --spacing-8: 32px;
+    --spacing-9: 36px;
+    --spacing-10: 40px;
+    --spacing-11: 44px;
+    --spacing-12: 48px;
+    --spacing-16: 64px;
+    --spacing-20: 80px;
+    --spacing-24: 96px;
+    --spacing-32: 128px;
+    --spacing-px: 1px;
+    --spacing-05: 2px;
+
+    /* Border Radius */
+    --radius-0: 0px;
+    --radius-xs: 4px;
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 16px;
+    --radius-lg-2: 20px;
+    --radius-xl: 24px;
+    --radius-2xl: 32px;
+    --radius-3xl: 36px;
+    --radius-full: 9999px;
+
+    /* Blur */
+    --blur-sm: 4px;
+    --blur-md: 8px;
+    --blur-lg: 12px;
+    --blur-xl: 24px;
+}
+
+/* ─── Light Theme Semantics ─── */
+[data-theme="light"] {
+    /* Surfaces */
+    --surface-base: var(--color-neutral-0);
+    --surface-subtle: var(--color-neutral-50);
+    --surface-layer: var(--color-neutral-100);
+    --surface-primary: var(--color-neutral-100);
+    --surface-secondary: var(--color-neutral-50);
+    --surface-glass: color-mix(in srgb, {color.neutral.0} 70%, transparent);
+    --surface-sunken: color-mix(in srgb, {color.neutral.0} 40%, transparent);
+    --surface-overlay: color-mix(in srgb, {color.neutral.1000} 50%, transparent);
+
+    /* Text */
+    --text-primary: var(--color-neutral-900);
+    --text-secondary: var(--color-neutral-500);
+    --text-tertiary: var(--color-neutral-400);
+    --text-inverse: var(--color-neutral-0);
+    --text-brand: var(--color-brand-500);
+    --text-on-brand: [object Object];
+
+    /* Borders */
+    --border-subtle: var(--color-neutral-200);
+    --border-strong: var(--color-neutral-300);
+    --border-interactive: var(--color-brand-500);
+
+    /* Interactive */
+    --interactive-primary: var(--color-brand-500);
+    --interactive-primary-hover: var(--color-brand-700);
+    --interactive-primary-text: var(--color-neutral-0);
+    --interactive-secondary: var(--color-neutral-100);
+    --interactive-secondary-hover: var(--color-neutral-200);
+    --interactive-secondary-text: var(--color-neutral-900);
+
+    /* Status */
+    --status-error: var(--color-error-500);
+    --status-success: var(--color-success-500);
+    --status-warning: var(--color-warning-500);
+    --status-info: var(--color-info-500);
+
+    /* Gradient */
+    --gradient-start: var(--color-brand-400);
+    --gradient-end: var(--color-brand-600);
+
+    /* Chart Palette */
+    --chart-1: var(--color-brand-500);
+    --chart-2: var(--color-brand-300);
+    --chart-3: var(--color-brand-700);
+    --chart-4: var(--color-success-500);
+    --chart-5: var(--color-warning-500);
+}
+
+/* ─── Dark Theme Semantics ─── */
+[data-theme="dark"] {
+    /* Surfaces */
+    --surface-base: var(--color-neutral-900);
+    --surface-subtle: var(--color-neutral-950);
+    --surface-layer: var(--color-neutral-900);
+    --surface-primary: var(--color-neutral-900);
+    --surface-secondary: var(--color-neutral-900);
+    --surface-glass: color-mix(in srgb, {color.neutral.950} 60%, transparent);
+    --surface-sunken: color-mix(in srgb, {color.neutral.950} 40%, transparent);
+    --surface-overlay: color-mix(in srgb, {color.neutral.1000} 70%, transparent);
+
+    /* Text */
+    --text-primary: var(--color-neutral-50);
+    --text-secondary: var(--color-neutral-400);
+    --text-tertiary: var(--color-neutral-600);
+    --text-inverse: var(--color-neutral-950);
+    --text-brand: var(--color-brand-400);
+    --text-on-brand: [object Object];
+
+    /* Borders */
+    --border-subtle: var(--color-neutral-800);
+    --border-strong: var(--color-neutral-700);
+    --border-interactive: var(--color-brand-500);
+
+    /* Interactive */
+    --interactive-primary: var(--color-brand-500);
+    --interactive-primary-hover: var(--color-brand-400);
+    --interactive-primary-text: var(--color-neutral-0);
+    --interactive-secondary: var(--color-neutral-800);
+    --interactive-secondary-hover: var(--color-neutral-700);
+    --interactive-secondary-text: var(--color-neutral-50);
+
+    /* Status */
+    --status-error: var(--color-error-500);
+    --status-success: var(--color-success-500);
+    --status-warning: var(--color-warning-500);
+    --status-info: var(--color-info-500);
+
+    /* Gradient */
+    --gradient-start: var(--color-brand-400);
+    --gradient-end: var(--color-brand-600);
+
+    /* Chart Palette */
+    --chart-1: var(--color-brand-400);
+    --chart-2: var(--color-brand-200);
+    --chart-3: var(--color-brand-600);
+    --chart-4: var(--color-success-500);
+    --chart-5: var(--color-warning-500);
+}
+
+/* ─── Radius Scale (Button → Container Derivation) ─── */
+:root {
+    /* Derived: button="full" (9999px) → container="3xl" (36px) */
+    --radius-button: var(--radius-full);
+    --radius-container: var(--radius-3xl);
+}
+
+/* ─── Deepblue Radius ─── */
+[data-brand="deepblue"] {
+    /* Derived: button="md" (12px) → container="xl" (24px) */
+    --radius-button: var(--radius-md);
+    --radius-container: var(--radius-xl);
+}
+
+/* ─── Red Radius ─── */
+[data-brand="red"] {
+    /* Derived: button="full" (9999px) → container="3xl" (36px) */
+    --radius-button: var(--radius-full);
+    --radius-container: var(--radius-3xl);
+}
+
+/* ─── Orange Radius ─── */
+[data-brand="orange"] {
+    /* Derived: button="full" (9999px) → container="3xl" (36px) */
+    --radius-button: var(--radius-full);
+    --radius-container: var(--radius-3xl);
+}
+
+/* ─── Lemon Radius ─── */
+[data-brand="lemon"] {
+    /* Derived: button="full" (9999px) → container="3xl" (36px) */
+    --radius-button: var(--radius-full);
+    --radius-container: var(--radius-3xl);
+}
+
+
 
 /* ═══════════════════════════════════════════════════════════════════════════
    PRIMITIVES — Raw values from primary.json
@@ -133,6 +381,10 @@
     --spacing-24: 6rem;
     --spacing-32: 8rem;
 
+    /* ─── Card Padding (Brand-Aware) ─── */
+    --card-padding: var(--spacing-4);       /* 16px default (rounded brands) */
+    --card-padding-gap: var(--spacing-2);   /* 8px gap between Header and Body */
+
     /* ─── Component Sizes ─── */
     /* FAB sizes */
     --size-fab-sm: 2.5rem; /* 40px */
@@ -143,6 +395,7 @@
     --size-icon-sm: 1rem; /* 16px */
     --size-icon-md: 1.25rem; /* 20px */
     --size-icon-lg: 1.5rem; /* 24px */
+    --size-icon-xl: 2rem; /* 32px */
 
     /* Modal max-widths */
     --size-modal-sm: 25rem; /* 400px */
@@ -151,11 +404,16 @@
     --size-modal-xl: 56.25rem; /* 900px */
 
     /* Avatar sizes */
+    --size-avatar-xs: 1.25rem; /* 20px */
     --size-avatar-sm: 2rem; /* 32px */
     --size-avatar-md: 2.5rem; /* 40px */
     --size-avatar-lg: 3rem; /* 48px */
     --size-avatar-xl: 4rem; /* 64px */
 
+    /* Border widths */
+    --border-width: 1px;
+    --border-width-bold: 2px;
+
     /* Badge dot size */
     --size-badge-dot: 0.375rem; /* 6px */
 
@@ -193,18 +451,11 @@
     --z-maximum: 100;
 
     /* ─── Radius (The Geometry Contract) ─── */
-    --radius-0: 0;
-    --radius-sm: 0.5rem;
-    --radius-md: 0.75rem;
-    --radius-lg: 1rem;
-    --radius-xl: 1.5rem;
-    --radius-2xl: 2rem;
-    --radius-full: 9999px;
+    /* Primitives (--radius-0 through --radius-full) are defined in generated.css from primary.json */
+    /* --radius-button and --radius-container are derived via radiusScale in generated.css */
 
     /* Master Control: Change this to transform the entire system */
     --radius-control: var(--radius-md);
-    --radius-container: var(--radius-lg);
-    --radius-button: var(--radius-full);
 
     /* ─── Effects (Atmospheric Depth) ─── */
     --blur-sm: 4px;
@@ -230,6 +481,24 @@
     --size-card-carousel-height: 530px;
     --size-calendar-time-col: 80px;
 
+    /* Chat component sizes */
+    --chat-max-width: 50rem; /* 800px */
+    --chat-bubble-radius: 1.25rem; /* 20px - rounded message bubbles */
+    --chat-textarea-min-height: 1.5rem; /* 24px */
+    --chat-textarea-max-height: 12.5rem; /* 200px */
+    --chat-image-max-width: 18.75rem; /* 300px */
+    --chat-image-max-height: 12.5rem; /* 200px */
+    --chat-image-max-width-mobile: 12.5rem; /* 200px */
+    --chat-image-max-height-mobile: 9.375rem; /* 150px */
+    --chat-typing-dot-size: 0.625rem; /* 10px */
+
+    /* Typography extension */
+    --letter-spacing-wide: 0.05em;
+
+    /* Animation extension - spring easing */
+    --transition-spring: 300ms cubic-bezier(0.16, 1, 0.3, 1);
+    --easing-spring: cubic-bezier(0.16, 1, 0.3, 1);
+
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
@@ -344,6 +613,13 @@
     --gradient-start: var(--color-brand-400);
     --gradient-end: var(--color-brand-600);
 
+    /* ─── Chart Palette ─── */
+    --chart-1: var(--color-brand-500);
+    --chart-2: var(--color-brand-300);
+    --chart-3: var(--color-brand-700);
+    --chart-4: var(--color-success-500);
+    --chart-5: var(--color-warning-500);
+
     /* ─── Switch Component ─── */
     --switch-thumb-bg: var(--color-neutral-0);
     /* Always white for consistent thumb appearance across themes */
@@ -454,6 +730,13 @@
     --gradient-start: var(--color-brand-400);
     --gradient-end: var(--color-brand-600);
 
+    /* ─── Chart Palette ─── */
+    --chart-1: var(--color-brand-400);
+    --chart-2: var(--color-brand-200);
+    --chart-3: var(--color-brand-600);
+    --chart-4: var(--color-success-500);
+    --chart-5: var(--color-warning-500);
+
     /* ─── Switch Component ─── */
     --switch-thumb-bg: var(--color-neutral-0);
     /* Always white for consistent thumb appearance across themes */
@@ -494,9 +777,6 @@
 
     /* Geometry: Pill Buttons (Full Radius) */
     --radius-control: var(--radius-lg);
-    --radius-container: 24px;
-    /* Explicitly match radius-control if needed, but root default is already full */
-    --radius-button: 9999px;
 
     /* Override Neutrals to Pure Scale */
     --color-neutral-0: var(--color-neutral-pure-0);
@@ -533,8 +813,8 @@
     --border-interactive: var(--color-brand-800);
 
     /* ─── Glass Effect: Neutral Gray ─── */
-    --surface-glass: rgba(245, 245, 245, 0.7);
-    --surface-sunken: rgba(250, 250, 250, 0.4);
+    --surface-glass: color-mix(in srgb, var(--color-neutral-100) 70%, transparent);
+    --surface-sunken: color-mix(in srgb, var(--color-neutral-50) 40%, transparent);
 
     /* ─── Hero Gradients ─── */
     --hero-gradient-1: var(--color-brand-900);
@@ -542,7 +822,7 @@
 
     /* ─── Feature Gradients ─── */
     --surface-brand-gradient: linear-gradient(135deg, var(--color-brand-soft) 0%, transparent 100%);
-    --status-warning-bg: rgba(234, 179, 8, 0.1);
+    --status-warning-bg: color-mix(in srgb, var(--color-warning-500) 10%, transparent);
 }
 
 /* ─── Red Dark Mode Semantics ─── */
@@ -564,8 +844,8 @@
     --border-interactive: var(--color-brand-100);
 
     /* ─── Glass Effect: Neutral Gray ─── */
-    --surface-glass: rgba(23, 23, 23, 0.6);
-    --surface-sunken: rgba(10, 10, 10, 0.4);
+    --surface-glass: color-mix(in srgb, var(--color-neutral-900) 60%, transparent);
+    --surface-sunken: color-mix(in srgb, var(--color-neutral-950) 40%, transparent);
 
     /* ─── Hero Gradients ─── */
     --hero-gradient-1: var(--color-brand-900);
@@ -573,12 +853,12 @@
 
     /* ─── Feature Gradients ─── */
     --surface-brand-gradient: linear-gradient(135deg, var(--color-brand-soft) 0%, transparent 100%);
-    --status-warning-bg: rgba(234, 179, 8, 0.15);
+    --status-warning-bg: color-mix(in srgb, var(--color-warning-500) 15%, transparent);
 }
 
 /* ─── UVM Component Overrides ─── */
 [data-brand="red"] .badge {
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
 }
 
 [data-brand="red"] .badge-primary {
@@ -586,6 +866,12 @@
     color: var(--interactive-primary-text);
 }
 
+/* ─── Red Brand Card Padding (Pill Button Visual Elegance) ─── */
+[data-brand="red"] {
+    --card-padding: var(--spacing-6);       /* 24px - generous padding for pill aesthetic */
+    --card-padding-gap: var(--spacing-3);   /* 12px - scaled gap */
+}
+
 
 /* ═══════════════════════════════════════════════════════════════════════════
    DEEPBLUE BRAND — Deep Blue Theme Override
@@ -611,8 +897,6 @@
     --color-brand-900: #003b69;
     --color-brand-950: #002540;
 
-    /* Override button radius to match control radius (rounded 12px) */
-    --radius-button: 12px;
 }
 
 /* ─── Deepblue Light Mode Semantics ─── */
@@ -623,7 +907,7 @@
 
     /* ─── Feature Gradients ─── */
     --surface-brand-gradient: linear-gradient(135deg, var(--color-brand-soft) 0%, transparent 100%);
-    --status-warning-bg: rgba(234, 179, 8, 0.1);
+    --status-warning-bg: color-mix(in srgb, var(--color-warning-500) 10%, transparent);
 }
 
 /* ─── Deepblue Dark Mode Semantics ─── */
@@ -634,7 +918,7 @@
 
     /* ─── Feature Gradients ─── */
     --surface-brand-gradient: linear-gradient(135deg, var(--color-brand-soft) 0%, transparent 100%);
-    --status-warning-bg: rgba(234, 179, 8, 0.15);
+    --status-warning-bg: color-mix(in srgb, var(--color-warning-500) 15%, transparent);
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
@@ -664,8 +948,6 @@
 
     /* Geometry: Pill Buttons (100% Rounded) */
     --radius-control: var(--radius-md);
-    --radius-container: var(--radius-lg);
-    --radius-button: 9999px;
 
     /* Override Neutrals to Pure Scale */
     --color-neutral-0: var(--color-neutral-pure-0);
@@ -702,8 +984,8 @@
     --border-interactive: var(--color-brand-500);
 
     /* ─── Glass Effect: Neutral Gray ─── */
-    --surface-glass: rgba(245, 245, 245, 0.7);
-    --surface-sunken: rgba(250, 250, 250, 0.4);
+    --surface-glass: color-mix(in srgb, var(--color-neutral-100) 70%, transparent);
+    --surface-sunken: color-mix(in srgb, var(--color-neutral-50) 40%, transparent);
 
     /* ─── Hero Gradients ─── */
     --hero-gradient-1: var(--color-brand-600);
@@ -711,7 +993,7 @@
 
     /* ─── Feature Gradients ─── */
     --surface-brand-gradient: linear-gradient(135deg, var(--color-brand-soft) 0%, transparent 100%);
-    --status-warning-bg: rgba(234, 179, 8, 0.1);
+    --status-warning-bg: color-mix(in srgb, var(--color-warning-500) 10%, transparent);
 }
 
 /* ─── Orange Dark Mode Semantics ─── */
@@ -733,8 +1015,8 @@
     --border-interactive: var(--color-brand-500);
 
     /* ─── Glass Effect: Neutral Gray ─── */
-    --surface-glass: rgba(23, 23, 23, 0.6);
-    --surface-sunken: rgba(10, 10, 10, 0.4);
+    --surface-glass: color-mix(in srgb, var(--color-neutral-900) 60%, transparent);
+    --surface-sunken: color-mix(in srgb, var(--color-neutral-950) 40%, transparent);
 
     /* ─── Hero Gradients ─── */
     --hero-gradient-1: var(--color-brand-600);
@@ -742,12 +1024,12 @@
 
     /* ─── Feature Gradients ─── */
     --surface-brand-gradient: linear-gradient(135deg, var(--color-brand-soft) 0%, transparent 100%);
-    --status-warning-bg: rgba(234, 179, 8, 0.15);
+    --status-warning-bg: color-mix(in srgb, var(--color-warning-500) 15%, transparent);
 }
 
 /* ─── Laureate Component Overrides ─── */
 [data-brand="orange"] .badge {
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
 }
 
 [data-brand="orange"] .badge-primary {
@@ -755,6 +1037,12 @@
     color: var(--interactive-primary-text);
 }
 
+/* ─── Orange Brand Card Padding (Pill Button Visual Elegance) ─── */
+[data-brand="orange"] {
+    --card-padding: var(--spacing-6);       /* 24px - generous padding for pill aesthetic */
+    --card-padding-gap: var(--spacing-3);   /* 12px - scaled gap */
+}
+
 /* ═══════════════════════════════════════════════════════════════════════════
    LEMON BRAND — Bright Lime Green Theme Override
    Usage: <html data-theme="light|dark" data-brand="lemon">
@@ -782,8 +1070,6 @@
 
     /* Geometry: Rounded Design with Usable Controls */
     --radius-control: var(--radius-lg);       /* 16px - usable for inputs/selects */
-    --radius-container: var(--radius-xl);     /* 24px - generous for cards */
-    --radius-button: var(--radius-full);      /* 9999px - pill buttons preserved */
 
     /* Override Neutrals to Pure Scale for Better Contrast */
     --color-neutral-0: var(--color-neutral-pure-0);
@@ -831,8 +1117,8 @@
     --border-interactive: var(--color-brand-700);
 
     /* ─── Glass Effect: Neutral Gray ─── */
-    --surface-glass: rgba(245, 245, 245, 0.7);
-    --surface-sunken: rgba(250, 250, 250, 0.4);
+    --surface-glass: color-mix(in srgb, var(--color-neutral-100) 70%, transparent);
+    --surface-sunken: color-mix(in srgb, var(--color-neutral-50) 40%, transparent);
 
     /* ─── Hero Gradients ─── */
     --hero-gradient-1: var(--color-brand-700);
@@ -840,7 +1126,7 @@
 
     /* ─── Feature Gradients ─── */
     --surface-brand-gradient: linear-gradient(135deg, var(--color-brand-soft) 0%, transparent 100%);
-    --status-warning-bg: rgba(234, 179, 8, 0.1);
+    --status-warning-bg: color-mix(in srgb, var(--color-warning-500) 10%, transparent);
 }
 
 /* ─── Lemon Dark Mode Semantics ─── */
@@ -862,8 +1148,8 @@
     --border-interactive: var(--color-brand-500);
 
     /* ─── Glass Effect: Neutral Gray ─── */
-    --surface-glass: rgba(23, 23, 23, 0.6);
-    --surface-sunken: rgba(10, 10, 10, 0.4);
+    --surface-glass: color-mix(in srgb, var(--color-neutral-900) 60%, transparent);
+    --surface-sunken: color-mix(in srgb, var(--color-neutral-950) 40%, transparent);
 
     /* ─── Hero Gradients ─── */
     --hero-gradient-1: var(--color-brand-600);
@@ -871,12 +1157,12 @@
 
     /* ─── Feature Gradients ─── */
     --surface-brand-gradient: linear-gradient(135deg, var(--color-brand-soft) 0%, transparent 100%);
-    --status-warning-bg: rgba(234, 179, 8, 0.15);
+    --status-warning-bg: color-mix(in srgb, var(--color-warning-500) 15%, transparent);
 }
 
 /* ─── Lemon Component Overrides ─── */
 [data-brand="lemon"] .badge {
-    border-radius: 9999px;
+    border-radius: var(--radius-full);
 }
 
 [data-brand="lemon"] .badge-primary {
@@ -884,6 +1170,12 @@
     color: var(--interactive-primary-text);
 }
 
+/* ─── Lemon Brand Card Padding (Bold Visual Elegance) ─── */
+[data-brand="lemon"] {
+    --card-padding: var(--spacing-6);       /* 24px - generous padding for visual impact */
+    --card-padding-gap: var(--spacing-3);   /* 12px - scaled gap */
+}
+
 /* ═══════════════════════════════════════════════════════════════════════════
    TRI-MODAL OPERATING SYSTEM
    Three distinct contexts: Display (Marketing) | Product (SaaS) | App (Touch)
@@ -2026,51 +2318,57 @@ a.navbar-link:focus:not(:focus-visible) {
 }
 
 /* ═══════════════════════════════════════════════════════════════════════════
-   BRAND VISUAL DIFFERENTIATION — Deepblue vs Orange
+   BRAND VISUAL DIFFERENTIATION — Deepblue, Orange, Lemon
    ═══════════════════════════════════════════════════════════════════════════ */
 
 /* Deepblue: Bold & Energetic personality */
 [data-brand="deepblue"] .btn,
 [data-brand="deepblue"] .card {
     border-width: 2px;
-    /* More prominent borders */
 }
 
 [data-brand="deepblue"] .card-interactive:hover {
-    box-shadow: 0 12px 20px -4px rgba(0, 111, 186, 0.3);
-    /* Blue-tinted shadow */
+    box-shadow: 0 12px 20px -4px color-mix(in srgb, var(--color-brand-500) 30%, transparent);
 }
 
 [data-brand="deepblue"] .btn:hover:not(:disabled) {
-    box-shadow: 0 8px 12px -2px rgba(0, 111, 186, 0.25);
+    box-shadow: 0 8px 12px -2px color-mix(in srgb, var(--color-brand-500) 25%, transparent);
 }
 
 /* Orange: Refined & Professional personality */
 [data-brand="orange"] .btn,
 [data-brand="orange"] .card {
     border-width: 1px;
-    /* Subtle borders */
 }
 
 [data-brand="orange"] .card-interactive:hover {
-    box-shadow: 0 8px 16px -4px rgba(241, 93, 34, 0.2);
-    /* Red-orange tinted shadow, more subtle */
+    box-shadow: 0 8px 16px -4px color-mix(in srgb, var(--color-brand-500) 20%, transparent);
 }
 
 [data-brand="orange"] .btn:hover:not(:disabled) {
-    box-shadow: 0 6px 10px -2px rgba(241, 93, 34, 0.2);
-    transition-duration: 300ms;
-    /* Slower, more deliberate interaction */
+    box-shadow: 0 6px 10px -2px color-mix(in srgb, var(--color-brand-500) 20%, transparent);
+    transition-duration: var(--transition-duration-slow, 300ms);
 }
 
 [data-brand="orange"] .btn:active:not(:disabled) {
-    transition-duration: 150ms;
-    /* Slightly slower press response */
+    transition-duration: var(--transition-duration-fast, 150ms);
 }
 
-/* Laureate refined modal appearance */
 [data-brand="orange"] .modal {
-    box-shadow: 0 16px 24px -4px rgba(241, 93, 34, 0.15);
+    box-shadow: 0 16px 24px -4px color-mix(in srgb, var(--color-brand-500) 15%, transparent);
+}
+
+/* Lemon: Bold & Vivid personality */
+[data-brand="lemon"] .card-interactive:hover {
+    box-shadow: 0 10px 18px -4px color-mix(in srgb, var(--color-brand-700) 25%, transparent);
+}
+
+[data-brand="lemon"] .btn:hover:not(:disabled) {
+    box-shadow: 0 8px 12px -2px color-mix(in srgb, var(--color-brand-700) 20%, transparent);
+}
+
+[data-brand="lemon"] .modal {
+    box-shadow: 0 16px 24px -4px color-mix(in srgb, var(--color-brand-700) 15%, transparent);
 }
 
 .sidebar-item.is-active .sidebar-item-icon {

package/dist/tokens/brands.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"brands.d.ts","sourceRoot":"","sources":["../../src/tokens/brands.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,WAAW,CAqLpC,CAAC;AAEX,eAAO,MAAM,YAAY,EAAE,KAAe,CAAC"}
+{"version":3,"file":"brands.d.ts","sourceRoot":"","sources":["../../src/tokens/brands.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,WAAW,CAgLpC,CAAC;AAEX,eAAO,MAAM,YAAY,EAAE,KAAe,CAAC"}