osi-cards-lib 1.5.30 → 1.5.32

package/styles/tokens/_master.scss

@@ -1,1404 +0,0 @@
-// ============================================
-// MASTER DESIGN TOKENS - Single Source of Truth
-// ============================================
-//
-// This file is the PRIMARY source for CSS design tokens (`--osi-*` variables).
-// All other SCSS files import from here.
-//
-// ⚠️ TOKEN SOURCE RELATIONSHIPS:
-// - CSS tokens (`--osi-*`): This file is authoritative
-// - JS theme presets (`--theme-*`): See `themes/presets.ts` (applied via JavaScript)
-// - Demo app themes: See `styles/themes.scss` (for demo app global theming)
-//
-// NOTE: `--theme-*` values in `themes/presets.ts` should match corresponding
-// values in this file's mixins (e.g., `osi-theme-dark`, `osi-theme-light`).
-//
-// TODO: Consider consolidating all token sources into a single definition file
-// that both SCSS and TypeScript can consume to eliminate duplication.
-//
-// Organization:
-//   1. PRIMITIVE TOKENS - Raw color values, base numbers
-//   2. SEMANTIC TOKENS - Meaningful references to primitives
-//   3. COMPONENT TOKENS - UI element-specific values
-//   4. THEME VARIANTS - Light/dark mode overrides
-//
-// ============================================
-
-// ============================================
-// 1. PRIMITIVE TOKENS
-// ============================================
-
-// --- Brand Colors ---
-$osi-color-brand: #ff7900;
-$osi-color-brand-dark: #cc5f00;
-$osi-color-brand-light: #ff9933;
-$osi-color-brand-pale: #ffe6cc;
-
-// --- Neutral Colors ---
-$osi-color-white: #ffffff;
-$osi-color-black: #000000;
-
-// --- Grayscale Ramp ---
-$osi-gray-50: #ffffff;
-$osi-gray-100: #fcfcfc;
-$osi-gray-150: #f7f7f7;
-$osi-gray-200: #f0f0f1;
-$osi-gray-300: #e9e9e9;
-$osi-gray-400: #92999e;
-$osi-gray-500: #5a5f62;
-$osi-gray-600: #343541;
-$osi-gray-700: #2a2a2a;
-$osi-gray-800: #232323;
-$osi-gray-850: #171717;
-$osi-gray-900: #000000;
-
-// --- Status Colors ---
-$osi-color-success: #22c55e;
-$osi-color-warning: #f59e0b;
-$osi-color-error: #ef4444;
-$osi-color-info: #3b82f6;
-$osi-color-neutral: #6b7280;
-
-// --- Trend Colors ---
-$osi-color-trend-up: #4ade80;
-$osi-color-trend-down: #f87171;
-$osi-color-trend-stable: #facc15;
-$osi-color-trend-neutral: #94a3b8;
-
-// --- Text Colors (Light Theme) ---
-$osi-foreground-light: #1c1c1f;
-$osi-muted-foreground-light: #555861;
-
-// --- Text Colors (Dark Theme) ---
-$osi-foreground-dark: #ffffff;
-$osi-muted-foreground-dark: #aaaaaa;
-
-// --- Background Colors (Light Theme) ---
-$osi-background-light: #ffffff;
-$osi-card-bg-light: #fefefe;
-$osi-section-bg-light: #fafafa;
-
-// --- Background Colors (Dark Theme) ---
-$osi-background-dark: #0a0a0a;
-$osi-background-dark-scoped: #030303;
-$osi-card-bg-dark: rgba(20, 20, 20, 0.6);
-
-// ============================================
-// 2. COLOR HELPER FUNCTIONS & VARIABLES
-// ============================================
-
-/// Generate brand color with opacity
-/// @param {Number} $opacity - Opacity value (0-1)
-@function brand-alpha($opacity) {
-  @return rgba($osi-color-brand, $opacity);
-}
-
-/// Generate foreground color with opacity
-/// @param {Number} $opacity - Opacity value (0-1)
-@function foreground-alpha($opacity) {
-  @return rgba($osi-foreground-light, $opacity);
-}
-
-/// Generate white with opacity
-/// @param {Number} $opacity - Opacity value (0-1)
-@function white-alpha($opacity) {
-  @return rgba(255, 255, 255, $opacity);
-}
-
-/// Generate black with opacity
-/// @param {Number} $opacity - Opacity value (0-1)
-@function black-alpha($opacity) {
-  @return rgba(0, 0, 0, $opacity);
-}
-
-// --- Pre-computed Brand Opacity Variants ---
-$brand-color: $osi-color-brand;
-$brand-color-rgb: 255, 121, 0;
-$brand-color-90: rgba($osi-color-brand, 0.9);
-$brand-color-80: rgba($osi-color-brand, 0.8);
-$brand-color-70: rgba($osi-color-brand, 0.7);
-$brand-color-60: rgba($osi-color-brand, 0.6);
-$brand-color-50: rgba($osi-color-brand, 0.5);
-$brand-color-40: rgba($osi-color-brand, 0.4);
-$brand-color-35: rgba($osi-color-brand, 0.35);
-$brand-color-30: rgba($osi-color-brand, 0.3);
-$brand-color-25: rgba($osi-color-brand, 0.25);
-$brand-color-22: rgba($osi-color-brand, 0.22);
-$brand-color-20: rgba($osi-color-brand, 0.2);
-$brand-color-15: rgba($osi-color-brand, 0.15);
-$brand-color-12: rgba($osi-color-brand, 0.12);
-$brand-color-10: rgba($osi-color-brand, 0.1);
-$brand-color-08: rgba($osi-color-brand, 0.08);
-$brand-color-05: rgba($osi-color-brand, 0.05);
-$brand-color-03: rgba($osi-color-brand, 0.03);
-
-// --- Pre-computed Foreground Opacity Variants ---
-$foreground-color: $osi-foreground-light;
-$foreground-rgb: 28, 28, 31;
-$foreground-90: rgba($osi-foreground-light, 0.9);
-$foreground-80: rgba($osi-foreground-light, 0.8);
-$foreground-70: rgba($osi-foreground-light, 0.7);
-$foreground-60: rgba($osi-foreground-light, 0.6);
-$foreground-50: rgba($osi-foreground-light, 0.5);
-$foreground-40: rgba($osi-foreground-light, 0.4);
-$foreground-30: rgba($osi-foreground-light, 0.3);
-$foreground-20: rgba($osi-foreground-light, 0.2);
-$foreground-16: rgba($osi-foreground-light, 0.16);
-$foreground-14: rgba($osi-foreground-light, 0.14);
-$foreground-12: rgba($osi-foreground-light, 0.12);
-$foreground-10: rgba($osi-foreground-light, 0.1);
-$foreground-08: rgba($osi-foreground-light, 0.08);
-$foreground-06: rgba($osi-foreground-light, 0.06);
-$foreground-05: rgba($osi-foreground-light, 0.05);
-$foreground-04: rgba($osi-foreground-light, 0.04);
-$foreground-03: rgba($osi-foreground-light, 0.03);
-
-// --- Pre-computed Secondary Text Variants ---
-$text-secondary: $osi-muted-foreground-light;
-$text-secondary-rgb: 85, 88, 97;
-$text-secondary-50: rgba($osi-muted-foreground-light, 0.5);
-$text-secondary-30: rgba($osi-muted-foreground-light, 0.3);
-$text-secondary-20: rgba($osi-muted-foreground-light, 0.2);
-$text-secondary-15: rgba($osi-muted-foreground-light, 0.15);
-$text-secondary-10: rgba($osi-muted-foreground-light, 0.1);
-$text-secondary-05: rgba($osi-muted-foreground-light, 0.05);
-
-// --- Pre-computed Muted Foreground (Dark Theme) ---
-$muted-foreground: $osi-muted-foreground-dark;
-$muted-foreground-rgb: 170, 170, 170;
-$muted-foreground-50: rgba($osi-muted-foreground-dark, 0.5);
-$muted-foreground-30: rgba($osi-muted-foreground-dark, 0.3);
-$muted-foreground-20: rgba($osi-muted-foreground-dark, 0.2);
-$muted-foreground-10: rgba($osi-muted-foreground-dark, 0.1);
-
-// --- Pre-computed White Opacity Variants ---
-$white-90: rgba(255, 255, 255, 0.9);
-$white-80: rgba(255, 255, 255, 0.8);
-$white-70: rgba(255, 255, 255, 0.7);
-$white-60: rgba(255, 255, 255, 0.6);
-$white-50: rgba(255, 255, 255, 0.5);
-$white-40: rgba(255, 255, 255, 0.4);
-$white-30: rgba(255, 255, 255, 0.3);
-$white-20: rgba(255, 255, 255, 0.2);
-$white-15: rgba(255, 255, 255, 0.15);
-$white-10: rgba(255, 255, 255, 0.1);
-$white-05: rgba(255, 255, 255, 0.05);
-
-// --- Pre-computed Status Color Variants ---
-$success-color: $osi-color-success;
-$success-color-20: rgba($osi-color-success, 0.2);
-$success-color-15: rgba($osi-color-success, 0.15);
-$success-color-10: rgba($osi-color-success, 0.1);
-
-$warning-color: $osi-color-warning;
-$warning-color-20: rgba($osi-color-warning, 0.2);
-$warning-color-15: rgba($osi-color-warning, 0.15);
-$warning-color-10: rgba($osi-color-warning, 0.1);
-
-$error-color: $osi-color-error;
-$error-color-20: rgba($osi-color-error, 0.2);
-$error-color-15: rgba($osi-color-error, 0.15);
-$error-color-10: rgba($osi-color-error, 0.1);
-
-$info-color: $osi-color-info;
-$info-color-20: rgba($osi-color-info, 0.2);
-$info-color-15: rgba($osi-color-info, 0.15);
-$info-color-10: rgba($osi-color-info, 0.1);
-
-// --- Border Colors ---
-$border-light: rgba(0, 0, 0, 0.08);
-$border-medium: rgba(0, 0, 0, 0.14);
-$border-dark: rgba(0, 0, 0, 0.22);
-$border-light-dark: rgba(255, 255, 255, 0.08);
-$border-medium-dark: rgba(255, 255, 255, 0.16);
-$border-dark-dark: rgba(255, 255, 255, 0.28);
-
-// --- Shadow Colors ---
-$shadow-light: rgba(0, 0, 0, 0.07);
-$shadow-medium: rgba(0, 0, 0, 0.12);
-$shadow-dark: rgba(0, 0, 0, 0.18);
-$shadow-light-dark: rgba(0, 0, 0, 0.55);
-$shadow-medium-dark: rgba(0, 0, 0, 0.65);
-$shadow-dark-dark: rgba(0, 0, 0, 0.75);
-
-// --- Background Aliases ---
-$card-bg: $osi-card-bg-light;
-$card-bg-hover: #fcfcfc;
-$section-bg: $osi-section-bg-light;
-$section-bg-hover: #f7f7f7;
-
-// ============================================
-// 3. BREAKPOINTS
-// ============================================
-
-$breakpoints: (
-  "mobile": 520px,
-  "tablet": 640px,
-  "lg": 820px,
-  "desktop": 1024px,
-  "wide": 1280px,
-);
-
-// ============================================
-// 4. CSS VARIABLE MIXINS
-// ============================================
-
-/// Generate base color tokens (shared between themes)
-@mixin osi-base-colors() {
-  --color-white: #{$osi-color-white};
-  --color-black: #{$osi-color-black};
-  --color-brand: #{$osi-color-brand};
-  --color-brand-dark: #{$osi-color-brand-dark};
-  --color-brand-light: #{$osi-color-brand-light};
-
-  // Grayscale
-  --color-gray-50: #{$osi-gray-50};
-  --color-gray-100: #{$osi-gray-100};
-  --color-gray-150: #{$osi-gray-150};
-  --color-gray-200: #{$osi-gray-200};
-  --color-gray-300: #{$osi-gray-300};
-  --color-gray-400: #{$osi-gray-400};
-  --color-gray-500: #{$osi-gray-500};
-  --color-gray-600: #{$osi-gray-600};
-  --color-gray-700: #{$osi-gray-700};
-  --color-gray-800: #{$osi-gray-800};
-  --color-gray-850: #{$osi-gray-850};
-  --color-gray-900: #{$osi-gray-900};
-}
-
-/// Generate status color tokens
-@mixin osi-status-colors() {
-  --status-success: #{$osi-color-success};
-  --status-success-bg: #{$success-color-15};
-  --status-success-border: rgba(74, 222, 128, 0.4);
-
-  --status-warning: #{$osi-color-warning};
-  --status-warning-bg: rgba(253, 186, 116, 0.15);
-  --status-warning-border: rgba(251, 191, 36, 0.4);
-
-  --status-error: #{$osi-color-error};
-  --status-error-bg: #{$error-color-15};
-  --status-error-border: rgba(248, 113, 113, 0.4);
-
-  --status-info: #{$osi-color-info};
-  --status-info-bg: #{$info-color-15};
-  --status-info-border: rgba(147, 197, 253, 0.4);
-
-  --status-neutral: #{$osi-color-neutral};
-  --status-neutral-bg: rgba(107, 114, 128, 0.15);
-  --status-neutral-border: rgba(156, 163, 175, 0.4);
-}
-
-/// Generate shadow tokens
-@mixin osi-shadows() {
-  // Elevation shadows - tight under the element
-  --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.03);
-  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.04);
-  --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.05);
-  --shadow-xl: 0 2px 4px rgba(0, 0, 0, 0.06);
-
-  // Glow shadows (brand-colored) - very subtle
-  --shadow-glow-sm: 0 0 3px #{$brand-color-05};
-  --shadow-glow-md: 0 0 5px #{$brand-color-08};
-  --shadow-glow-lg: 0 0 8px #{$brand-color-10};
-
-  // Inset shadows
-  --shadow-inset-sm: inset 0 1px 2px rgba(0, 0, 0, 0.04);
-  --shadow-inset-md: inset 0 2px 4px rgba(0, 0, 0, 0.05);
-
-  // Combined hover shadow - subtle with brand accent
-  --shadow-hover: var(--shadow-lg), var(--shadow-glow-sm);
-}
-
-/// Generate radius tokens
-@mixin osi-radius() {
-  --radius-base: 0.625rem;
-  --radius-xs: 0.25rem;
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-2xl: 1.5rem;
-  --radius-full: 9999px;
-}
-
-/// Generate spacing tokens
-@mixin osi-spacing() {
-  --spacing-base: 0.25rem;
-
-  // Primary spacing scale (fluid)
-  --space-1: clamp(2px, 0.4vw, 6px);
-  --space-2: clamp(4px, 0.6vw, 8px);
-  --space-3: clamp(6px, 0.8vw, 12px);
-  --space-4: clamp(8px, 1vw, 14px);
-  --space-5: clamp(10px, 1.2vw, 18px);
-  --space-6: clamp(12px, 1.4vw, 20px);
-  --space-7: clamp(14px, 1.6vw, 22px);
-  --space-8: clamp(16px, 1.8vw, 24px);
-  --space-9: clamp(18px, 2vw, 28px);
-  --space-10: clamp(20px, 2.2vw, 32px);
-  --space-11: clamp(22px, 2.4vw, 36px);
-  --space-12: clamp(24px, 2.6vw, 40px);
-
-  // Semantic spacing aliases
-  --spacing-xs: var(--space-1);
-  --spacing-sm: var(--space-2);
-  --spacing-md: var(--space-3);
-  --spacing-lg: var(--space-4);
-  --spacing-xl: var(--space-5);
-  --spacing-2xl: var(--space-6);
-  --spacing-3xl: var(--space-7);
-  --spacing-4xl: var(--space-8);
-
-  // Fixed grid gaps
-  --gap-xs: 4px;
-  --gap-sm: 6px;
-  --gap-md: 8px;
-  --gap-lg: 12px;
-  --gap-xl: 16px;
-  --gap-2xl: 20px;
-  --gap-3xl: 24px;
-  --gap-4xl: 32px;
-}
-
-/// Generate z-index scale tokens (isolated within container)
-/// All z-indices are relative to 0 to prevent host app collisions
-@mixin osi-z-index() {
-  // Base layer (content)
-  --z-base: 0;
-  --z-content: 1;
-
-  // Elevated layers (cards, sections)
-  --z-elevated: 10;
-  --z-card: 10;
-  --z-section: 15;
-
-  // Interactive layers (dropdowns, tooltips)
-  --z-dropdown: 100;
-  --z-tooltip: 200;
-  --z-popover: 300;
-
-  // Overlay layers (modals, dialogs)
-  --z-overlay: 400;
-  --z-modal: 500;
-  --z-dialog: 600;
-
-  // Top-most layers (notifications, alerts)
-  --z-notification: 700;
-  --z-toast: 800;
-
-  // Maximum layer (for special cases)
-  --z-max: 999;
-}
-
-/// Generate animation tokens
-@mixin osi-animation() {
-  // Duration scale
-  --duration-instant: 40ms;
-  --duration-fast: 80ms;
-  --duration-normal: 160ms;
-  --duration-moderate: 220ms;
-  --duration-slow: 300ms;
-  --duration-slower: 380ms;
-  --duration-slowest: 460ms;
-
-  // Easing functions
-  --ease-out-smooth: cubic-bezier(0.23, 1, 0.32, 1);
-  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
-  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
-  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
-  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-
-  // Motion distances
-  --motion-distance-xs: 2px;
-  --motion-distance-sm: 4px;
-  --motion-distance-md: 6px;
-  --motion-distance-lg: 10px;
-  --motion-distance-xl: 12px;
-
-  // Motion scales
-  --motion-scale-soft-start: 0.992;
-  --motion-scale-soft-end: 1;
-  --motion-scale-pop: 1.015;
-
-  // Stagger delays
-  --stagger-delay-fast: 15ms;
-  --stagger-delay-base: 25ms;
-  --stagger-delay-slow: 45ms;
-
-  // Animation playback
-  --animation-fill-mode: both;
-  --animation-play-state: running;
-}
-
-/// Generate opacity tokens
-@mixin osi-opacity() {
-  --opacity-subtle: 0.05;
-  --opacity-muted: 0.15;
-  --opacity-medium: 0.4;
-  --opacity-strong: 0.7;
-  --opacity-solid: 0.9;
-}
-
-/// Generate typography tokens
-/// @param {String} $variant - 'demo' or 'integration'
-@mixin osi-typography($variant: "demo") {
-  // Both demo and integration now use the same compact values
-  --font-size-base: 13px;
-  --text-xs: 0.625rem;
-  --text-sm: 0.75rem;
-  --text-base: 0.875rem;
-  --text-lg: 0.8125rem;
-  --text-xl: 1.125rem;
-  --text-2xl: 1.0625rem;
-  --text-3xl: 1.75rem;
-  --text-4xl: 2.125rem;
-  --text-5xl: 2.875rem;
-  --text-7xl: 4.375rem;
-
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-}
-
-/// Generate card typography tokens
-/// @param {String} $variant - 'demo' or 'integration'
-@mixin osi-card-typography($variant: "demo") {
-  // Both demo and integration now use the same compact values
-  // Section Titles
-  --section-title-font-size: clamp(0.92rem, 0.87rem + 0.2vw, 1.07rem);
-  --section-title-font-weight: 700;
-  --section-title-letter-spacing: -0.02em;
-  --section-title-line-height: 1.3;
-  --section-title-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
-
-  // Card Titles
-  --card-title-font-size: clamp(0.83rem, 0.78rem + 0.15vw, 0.93rem);
-  --card-title-font-weight: 700;
-  --card-title-letter-spacing: -0.01em;
-  --card-title-line-height: 1.4;
-  --card-title-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
-
-  // Card Subtitles
-  --card-subtitle-font-size: clamp(0.65rem, 0.625rem + 0.1vw, 0.7rem);
-  --card-subtitle-font-weight: 500;
-  --card-subtitle-letter-spacing: 0.015em;
-  --card-subtitle-line-height: 1.3;
-
-  // Card Labels
-  --card-label-font-size: clamp(0.5rem, 0.48rem + 0.05vw, 0.5rem);
-  --card-label-font-weight: 700;
-  --card-label-letter-spacing: 0.065em;
-  --card-label-line-height: 1.25;
-  --card-label-text-transform: uppercase;
-  --card-label-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-
-  // Card Values
-  --card-value-font-size: clamp(1rem, 0.95rem + 0.2vw, 1rem);
-  --card-value-font-size-large: clamp(1.2rem, 1.15rem + 0.2vw, 1.25rem);
-  --card-value-font-size-xl: clamp(1.25rem, 1.2rem + 0.2vw, 1.25rem);
-  --card-value-font-weight: 600;
-  --card-value-letter-spacing: -0.015em;
-  --card-value-line-height: 1.35;
-  --card-value-text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-
-  // Card Meta
-  --card-meta-font-size: clamp(0.55rem, 0.525rem + 0.1vw, 0.6rem);
-  --card-meta-font-weight: 500;
-  --card-meta-line-height: 1.3;
-
-  // Smallest text
-  --card-text-small-font-size: clamp(0.355rem, 0.295rem + 0.13vw, 0.455rem);
-
-  // Grid min width
-  --section-grid-min-width: 200px;
-
-  // Shared aliases
-  --font-size-section-header: var(--section-title-font-size);
-}
-
-/// Generate card layout tokens
-@mixin osi-card-layout() {
-  --card-main-padding: 16px;
-  --card-padding-vertical: 12px;
-  --card-padding-horizontal: 16px;
-  --card-padding: 16px;
-  --card-padding-large: 20px;
-  --section-padding: 12px;
-  --section-container-padding: 12px;
-  --card-min-height: auto;
-  --card-gap: clamp(6px, 0.6vw, 10px);
-  --card-gap-large: clamp(10px, 0.8vw, 14px);
-  --card-nested-gap: clamp(3px, 0.4vw, 6px);
-  --section-header-gap: clamp(3px, 0.4vw, 6px);
-  --section-header-padding-bottom: clamp(0px, 0.2vw, 2px);
-  --section-title-margin-bottom: 0;
-  --card-border-radius: 12px;
-  --card-border-radius-large: 16px;
-  --section-card-gap: 12px;
-  --section-card-border-radius: 10px;
-
-  // Element gaps within cards
-  --card-element-gap-xs: 2px;
-  --card-element-gap-sm: 3px;
-  --card-element-gap-md: 4px;
-  --card-element-gap-lg: 6px;
-  --card-element-gap-xl: 8px;
-
-  // Border widths
-  --border-width-default: 1px;
-  --border-width-accent: 3px;
-  --border-width-accent-sm: 2px;
-
-  // Icon sizes
-  --icon-xs: 10px;
-  --icon-sm: 13px;
-  --icon-md: 16px;
-  --icon-lg: 22px;
-  --icon-xl: 36px;
-
-  // Avatar sizes
-  --avatar-sm: 32px;
-  --avatar-md: 36px;
-
-  // Progress bar
-  --progress-height: 2px;
-  --progress-margin: 4px 0;
-
-  // Tag padding
-  --tag-padding: 3px 6px;
-  --tag-padding-sm: 2px 4px;
-  --tag-padding-lg: 3px 7px;
-
-  // Grid gaps (semantic)
-  --grid-gap-xs: var(--gap-sm);
-  --grid-gap-sm: var(--gap-md);
-  --grid-gap-md: var(--gap-lg);
-  --grid-gap-lg: var(--gap-xl);
-  --grid-gap-xl: var(--gap-2xl);
-
-  // Section-specific gaps
-  --section-grid-gap: var(--gap-md);
-  --section-stack-gap: var(--gap-lg);
-  --section-item-gap: var(--gap-sm);
-  --section-item-padding: var(--gap-lg);
-  --metric-item-padding: 10px 12px;
-  --list-item-padding: 10px 12px;
-}
-
-/// Generate card text color tokens
-@mixin osi-card-text-colors() {
-  --card-text-primary: var(--foreground);
-  --card-text-secondary: var(--muted-foreground);
-  --card-text-muted: var(--muted-foreground);
-  --card-text-hover: var(--primary);
-  --card-text-label: var(--muted-foreground);
-  --card-meta-color: var(--muted-foreground);
-}
-
-/// Generate card surface tokens
-@mixin osi-card-surfaces() {
-  --card-background: var(--ai-card-background, #{$brand-color-03});
-  --card-background-hover: var(--ai-card-background-hover, #{$brand-color-05});
-
-  // Card transitions
-  --card-transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
-  --card-transition-fast: all 0.22s ease;
-}
-
-/// Generate interactive state tokens
-@mixin osi-interactive() {
-  --interactive-hover-bg: #{$brand-color-03};
-  --interactive-active-bg: #{$brand-color-12};
-  --interactive-focus-ring: 0 0 0 2px #{$brand-color-40};
-  --interactive-glow: 0 0 12px #{$brand-color-30};
-}
-
-/// Generate OSI Card component tokens (--osi-card-*)
-/// SINGLE SOURCE OF TRUTH for all card styling variables
-@mixin osi-card-tokens() {
-  // Card Background
-  --osi-card-background: var(
-    --theme-ai-card-background,
-    var(--card-surface, var(--card-section-bg))
-  );
-  --osi-card-background-hover: var(
-    --theme-ai-card-background-hover,
-    var(--card-surface-hover, var(--card-section-bg))
-  );
-  --osi-card-background-fullscreen: var(--osi-card-background);
-
-  // Card Backdrop Filter
-  --osi-card-backdrop-filter: var(--theme-ai-card-backdrop-filter, blur(12px));
-
-  // Card Border
-  --osi-card-border: var(--theme-ai-card-border, 1px solid #{$white-05});
-  --osi-card-border-hover: var(--theme-ai-card-border-hover, 1px solid #{$brand-color-12});
-  --osi-card-border-fullscreen: none;
-
-  // Card Shadow
-  --osi-card-shadow: var(--theme-ai-card-box-shadow, var(--shadow-md));
-  --osi-card-shadow-hover: var(--theme-ai-card-box-shadow-hover, var(--shadow-lg));
-  --osi-card-shadow-fullscreen: none;
-
-  // Card Spacing - Padding
-  --osi-card-padding: var(--card-main-padding);
-  --osi-card-padding-top: var(--card-main-padding);
-  --osi-card-padding-bottom: var(--card-main-padding);
-  --osi-card-padding-left: var(--card-main-padding);
-  --osi-card-padding-right: var(--card-main-padding);
-  --osi-card-padding-mobile: var(--space-1);
-
-  // Card Spacing - Margins
-  --osi-card-margin-top: 0;
-  --osi-card-margin-bottom: 0;
-  --osi-card-margin-left: 0;
-  --osi-card-margin-right: 0;
-
-  // Card Spacing - Gaps
-  --osi-card-gap: var(--section-card-gap);
-  --osi-card-body-gap: var(--space-3);
-  --osi-card-grid-gap: var(--section-card-gap);
-
-  // Card Border Radius
-  --osi-card-border-radius: var(--card-border-radius);
-  --osi-card-border-radius-fullscreen: 0;
-
-  // Card Text Colors
-  --osi-card-text-primary: var(--card-text-primary);
-  --osi-card-text-secondary: var(--card-text-secondary);
-  --osi-card-text-muted: var(--card-text-muted);
-  --osi-card-text-label: var(--card-text-label);
-  --osi-card-text-meta: var(--card-meta-color);
-
-  // Card Transitions
-  --osi-card-transition: var(--theme-ai-card-transition, all 0.28s cubic-bezier(0.4, 0, 0.2, 1));
-  --osi-card-transition-border: border-color 0.2s ease;
-  --osi-card-transition-background: background 0.2s ease;
-  --osi-card-transition-shadow: box-shadow 0.2s ease;
-
-  // Card Actions
-  --osi-card-action-primary-bg: var(--primary, #{$osi-color-brand});
-  --osi-card-action-primary-bg-hover: rgba($osi-color-brand, 0.85);
-  --osi-card-action-primary-color: var(--primary-foreground, #{$osi-color-white});
-  --osi-card-action-primary-border: #{$brand-color-80};
-  --osi-card-action-primary-shadow: 0 2px 8px #{$brand-color-15}, 0 1px 2px rgba(0, 0, 0, 0.1);
-  --osi-card-action-primary-shadow-hover:
-    0 4px 16px #{$brand-color-20}, 0 2px 4px rgba(0, 0, 0, 0.1);
-  --osi-card-action-secondary-bg: rgba(40, 40, 45, 0.9);
-  --osi-card-action-secondary-bg-hover: rgba(50, 46, 42, 0.85);
-  --osi-card-action-secondary-color: var(--foreground, #{$osi-color-white});
-  --osi-card-action-secondary-border: rgba(55, 55, 60, 0.6);
-  --osi-card-action-secondary-border-hover: #{$brand-color-25};
-  --osi-card-action-secondary-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
-  --osi-card-action-secondary-shadow-hover:
-    0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
-
-  // Card Meta Elements
-  --osi-card-eyebrow-color: #{$foreground-80};
-  --osi-card-type-pill-bg: #{$brand-color-20};
-  --osi-card-type-pill-border: #{$brand-color-30};
-  --osi-card-type-pill-color: rgba(66, 61, 55, 0.85);
-  --osi-card-meta-color: #{$foreground-80};
-  --osi-card-meta-chip-bg: rgba(40, 40, 45, 0.8);
-  --osi-card-meta-chip-border: rgba(55, 55, 60, 0.65);
-  --osi-card-meta-chip-dot-primary: var(--accent);
-  --osi-card-meta-chip-dot-secondary: #{$brand-color-60};
-  --osi-card-meta-chip-dot-tertiary: #{$brand-color-35};
-  --osi-card-meta-chip-dot-shadow: 0 0 0 1px #{$brand-color-12};
-  --osi-card-footnote-color: #{$foreground-70};
-
-  // Card Fullscreen Button
-  --osi-card-fullscreen-btn-bg: #{$brand-color-08};
-  --osi-card-fullscreen-btn-bg-hover: #{$brand-color-08};
-  --osi-card-fullscreen-btn-border: #{$brand-color-12};
-  --osi-card-fullscreen-btn-border-hover: #{$brand-color-20};
-  --osi-card-fullscreen-btn-shadow: 0 4px 12px #{$brand-color-20};
-  --osi-card-fullscreen-btn-size: 36px;
-  --osi-card-fullscreen-btn-radius: 8px;
-
-  // Card Shine Effect
-  --osi-card-shine-gradient-primary: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.2) 0%,
-    rgba(255, 255, 255, 0) 50%,
-    rgba(255, 255, 255, 0.1) 100%
-  );
-  --osi-card-shine-gradient-secondary: linear-gradient(
-    135deg,
-    rgba(255, 255, 255, 0.15) 0%,
-    rgba(255, 255, 255, 0) 50%,
-    rgba(255, 255, 255, 0.08) 100%
-  );
-}
-
-/// Generate OSI Section component tokens (--osi-section-*)
-/// SINGLE SOURCE OF TRUTH for all section styling variables
-@mixin osi-section-tokens() {
-  // Section Background
-  --osi-section-background: var(
-    --section-background,
-    var(--section-surface, var(--card-section-bg))
-  );
-  --osi-section-background-hover: var(
-    --section-background-hover,
-    var(--section-surface-hover, var(--card-section-bg))
-  );
-  --osi-section-background-main: var(--section-bg-main, var(--section-surface, var(--background)));
-  --osi-section-background-main-hover: var(
-    --section-bg-main-hover,
-    var(--section-surface-hover, var(--background))
-  );
-  --osi-section-background-contrast: var(--section-bg-contrast, var(--card-section-bg));
-  --osi-section-background-contrast-hover: var(
-    --section-bg-contrast-hover,
-    var(--card-section-card-bg)
-  );
-
-  // Section Border
-  --osi-section-border: var(--theme-section-border, 1px solid rgba(0, 0, 0, 0.06));
-  --osi-section-border-hover: var(--theme-section-border-hover, 1px solid #{$brand-color-15});
-
-  // Section Shadow
-  --osi-section-shadow: var(--theme-section-box-shadow, var(--shadow-md));
-  --osi-section-shadow-hover: var(
-    --theme-section-box-shadow-hover,
-    var(--shadow-lg),
-    var(--shadow-glow-sm)
-  );
-  --osi-section-shadow-fullscreen: none;
-
-  // Section Spacing - Padding
-  --osi-section-padding: var(--section-padding);
-  --osi-section-padding-top: var(--section-padding);
-  --osi-section-padding-bottom: var(--section-padding);
-  --osi-section-padding-left: var(--section-padding);
-  --osi-section-padding-right: var(--section-padding);
-
-  // Section Spacing - Margins
-  --osi-section-margin-top: 0;
-  --osi-section-margin-bottom: var(--osi-section-spacing-bottom);
-  --osi-section-margin-left: 0;
-  --osi-section-margin-right: 0;
-  --osi-section-spacing-bottom: var(--space-3);
-
-  // Section Spacing - Gaps
-  --osi-section-gap: var(--section-card-gap);
-  --osi-section-gap-internal: var(--card-gap);
-  --osi-section-grid-gap: var(--section-grid-gap);
-  --osi-section-internal-gap: var(--card-gap);
-  --osi-section-header-gap: var(--section-header-gap);
-  --osi-section-header-padding-bottom: var(--section-header-padding-bottom);
-
-  // Section Border Radius
-  --osi-section-border-radius: var(--section-card-border-radius);
-
-  // Section Typography
-  --osi-section-title-font-size: var(--section-title-font-size, 1.1rem);
-  --osi-section-title-font-weight: var(--section-title-font-weight, 700);
-  --osi-section-title-letter-spacing: var(--section-title-letter-spacing, -0.02em);
-  --osi-section-title-line-height: var(--section-title-line-height, 1.3);
-  --osi-section-title-color: var(--card-text-primary);
-  --osi-section-title-margin-bottom: var(--section-title-margin-bottom);
-  --osi-section-title-underline-length: clamp(var(--space-8), 3vw, var(--space-12));
-  --osi-section-title-underline-hover-length: clamp(var(--space-10), 4vw, var(--space-12));
-  --osi-section-title-underline-height: var(--border-width-accent);
-  --osi-section-title-underline-offset: calc(var(--space-2) * -1);
-  --osi-section-title-underline-color: var(--section-accent, var(--accent, #{$osi-color-brand}));
-  // Fallback for browsers without color-mix support
-  --osi-section-title-hover-color: var(--color-brand);
-
-  --osi-section-description-color: var(--muted-foreground);
-  --osi-section-description-color-hover: var(--foreground);
-
-  // Section Accent
-  --osi-section-accent: var(--section-accent, var(--accent, #{$osi-color-brand}));
-  --osi-section-accent-info: var(--section-accent-info, #{$osi-color-brand});
-  --osi-section-accent-analytics: var(--section-accent-analytics, #{$osi-color-brand});
-  --osi-section-accent-financials: var(--section-accent-financials, #{$osi-color-brand});
-  --osi-section-accent-map: var(--section-accent-map, #{$osi-color-brand});
-  --osi-section-accent-network: var(--section-accent-network, #{$osi-color-brand});
-  --osi-section-accent-contact: var(--section-accent-contact, #{$osi-color-brand});
-  --osi-section-accent-product: var(--section-accent-product, #{$osi-color-brand});
-  --osi-section-accent-solutions: var(--section-accent-solutions, #{$osi-color-brand});
-  --osi-section-accent-overview: var(--section-accent-overview, #{$osi-color-brand});
-  --osi-section-accent-list: var(--section-accent-list, #{$osi-color-brand});
-  --osi-section-accent-event: var(--section-accent-event, #{$osi-color-brand});
-  --osi-section-accent-chart: var(--section-accent-chart, var(--accent, #{$osi-color-brand}));
-  --osi-section-accent-reference: var(
-    --section-accent-reference,
-    var(--accent, #{$osi-color-brand})
-  );
-  --osi-section-accent-quotation: var(
-    --section-accent-quotation,
-    var(--accent, #{$osi-color-brand})
-  );
-
-  // Section Effects
-  --osi-section-glow-background: radial-gradient(
-    circle at top right,
-    #{$brand-color-35} 0%,
-    transparent 65%
-  );
-  --osi-section-glow-opacity-hover: 0.12;
-  --osi-section-backdrop-filter: blur(12px);
-
-  // Section Badge
-  --osi-section-badge-bg: linear-gradient(135deg, #{$brand-color-15}, #{$brand-color-12});
-  --osi-section-badge-bg-hover: #{$brand-color-12};
-  --osi-section-badge-color: #{$brand-color-90};
-  --osi-section-badge-padding: calc(var(--tag-padding-y-sm) * 0.75)
-    calc(var(--tag-padding-x) * 0.875);
-
-  // Section Empty State
-  --osi-section-empty-bg: var(--section-item-background, var(--card-section-bg));
-  --osi-section-empty-bg-hover: var(--section-item-background-hover, var(--card-section-card-bg));
-  --osi-section-empty-border: 1px dashed var(--border);
-  --osi-section-empty-border-hover: var(--accent);
-  --osi-section-empty-icon-opacity: 0.5;
-  --osi-section-empty-icon-opacity-hover: 0.7;
-
-  // Section Transitions
-  --osi-section-transition: var(
-    --theme-section-transition,
-    border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1),
-    box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1)
-  );
-  --osi-section-title-transition: color 0.22s cubic-bezier(0.4, 0, 0.2, 1);
-  --osi-section-description-transition: color 0.2s ease;
-}
-
-/// Generate OSI Section Item component tokens (--osi-section-item-*)
-/// SINGLE SOURCE OF TRUTH for all section item/field styling variables
-@mixin osi-section-item-tokens() {
-  // Section Item Background
-  --osi-section-item-background: var(--theme-section-item-background, var(--card-section-bg));
-  --osi-section-item-background-hover: var(
-    --theme-section-item-background-hover,
-    var(--card-section-bg)
-  );
-
-  // Section Item Border
-  --osi-section-item-border: var(--theme-section-item-border, 1px solid rgba(0, 0, 0, 0.06));
-  --osi-section-item-border-hover: var(
-    --theme-section-item-border-hover,
-    1px solid #{$brand-color-08}
-  );
-
-  // Section Item Shadow
-  --osi-section-item-shadow: var(--theme-section-item-box-shadow, var(--shadow-sm));
-  --osi-section-item-shadow-hover: var(
-    --theme-section-item-box-shadow-hover,
-    var(--shadow-md),
-    var(--shadow-glow-sm)
-  );
-
-  // Section Item Spacing - Padding
-  --osi-section-item-padding: var(--section-item-padding);
-  --osi-section-item-padding-top: var(--gap-lg);
-  --osi-section-item-padding-bottom: var(--gap-lg);
-  --osi-section-item-padding-left: var(--gap-lg);
-  --osi-section-item-padding-right: var(--gap-lg);
-  --osi-section-item-metric-padding: var(--metric-item-padding);
-  --osi-section-item-list-padding: var(--list-item-padding);
-
-  // Section Item Spacing - Margins
-  --osi-section-item-margin-top: 0;
-  --osi-section-item-margin-bottom: 0;
-  --osi-section-item-margin-left: 0;
-  --osi-section-item-margin-right: 0;
-
-  // Section Item Spacing - Gaps
-  --osi-section-item-gap: var(--section-item-gap);
-  --osi-section-item-grid-gap: var(--section-item-gap);
-
-  // Section Item Border Radius
-  --osi-section-item-border-radius: var(--radius-md);
-
-  // Section Item Typography - Label
-  --osi-section-item-label-font-size: var(--text-sm);
-  --osi-section-item-label-font-weight: var(--font-weight-medium);
-  --osi-section-item-label-color: var(--muted-foreground);
-  --osi-section-item-label-letter-spacing: 0.01em;
-  --osi-section-item-label-text-transform: uppercase;
-
-  // Section Item Typography - Value
-  --osi-section-item-value-font-size: var(--text-base);
-  --osi-section-item-value-font-weight: var(--font-weight-normal);
-  --osi-section-item-value-color: var(--foreground);
-  --osi-section-item-value-letter-spacing: 0;
-
-  // Section Item Icon
-  --osi-section-item-icon-size: var(--icon-md);
-  --osi-section-item-icon-color: var(--muted-foreground);
-  --osi-section-item-icon-color-hover: var(--accent);
-
-  // Section Item Transitions
-  --osi-section-item-transition: var(
-    --theme-section-item-transition,
-    background 220ms cubic-bezier(0.4, 0, 0.2, 1),
-    box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 220ms cubic-bezier(0.4, 0, 0.2, 1)
-  );
-  --osi-section-item-hover-transform: var(--theme-section-item-hover-transform, none);
-}
-
-/// Generate element type system tokens (Hero, Buttons, Cards, Sections, Section Items)
-@mixin osi-element-system() {
-  // Include component-specific token mixins
-  @include osi-card-tokens();
-  @include osi-section-tokens();
-  @include osi-section-item-tokens();
-
-  // 1. HERO CARDS
-  --hero-card-border: 1px solid rgba(146, 153, 158, 0.15);
-  --hero-card-border-hover: #{$brand-color-40};
-  --hero-card-background: var(--card);
-  --hero-card-background-hover: var(--card);
-  --hero-card-border-radius: var(--radius-lg);
-  --hero-card-box-shadow: var(--shadow-md);
-  --hero-card-box-shadow-hover: var(--shadow-lg);
-  --hero-card-hover-transform: translateY(-2px);
-
-  // 2. BUTTONS
-  --button-border: 1px solid transparent;
-  --button-border-hover: 1px solid #{$brand-color-40};
-  --button-background: var(--primary);
-  --button-background-hover: color-mix(in srgb, var(--primary) 85%, transparent);
-  --button-border-radius: var(--radius-md);
-  --button-box-shadow: var(--shadow-sm);
-  --button-box-shadow-hover: var(--shadow-md);
-  --button-hover-transform: translateY(-1px);
-
-  // 3. AI CARDS (aliases for backward compatibility)
-  --ai-card-border: var(--osi-card-border);
-  --ai-card-border-hover: var(--osi-card-border-hover);
-  --ai-card-background: var(--osi-card-background);
-  --ai-card-background-hover: var(--osi-card-background-hover);
-  --ai-card-border-radius: var(--osi-card-border-radius);
-  --ai-card-box-shadow: var(--osi-card-shadow);
-  --ai-card-box-shadow-hover: var(--osi-card-shadow-hover);
-  --ai-card-hover-transform: none;
-  --ai-card-transition-default:
-    border 0.32s cubic-bezier(0.4, 0, 0.2, 1), background 0.32s cubic-bezier(0.4, 0, 0.2, 1),
-    box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
-  --ai-card-transition: var(--theme-ai-card-transition, var(--ai-card-transition-default));
-
-  // 4. SECTIONS (aliases for backward compatibility)
-  --section-border: var(--osi-section-border);
-  --section-border-hover: var(--osi-section-border-hover);
-  --section-border-radius: var(--osi-section-border-radius);
-  --section-box-shadow-default: var(--osi-section-shadow);
-  --section-box-shadow-hover-default: var(--osi-section-shadow-hover);
-  --section-box-shadow: var(--osi-section-shadow);
-  --section-box-shadow-hover: var(--osi-section-shadow-hover);
-  --section-hover-transform: none;
-  --section-transition: var(--osi-section-transition);
-
-  // 5. SECTION ITEMS (aliases for backward compatibility)
-  --section-item-border: var(--osi-section-item-border);
-  --section-item-border-hover: var(--osi-section-item-border-hover);
-  --section-item-background: var(--osi-section-item-background);
-  --section-item-background-hover: var(--osi-section-item-background-hover);
-  --section-item-border-radius: var(--osi-section-item-border-radius);
-  --section-item-box-shadow: var(--osi-section-item-shadow);
-  --section-item-box-shadow-hover-default: var(--osi-section-item-shadow-hover);
-  --section-item-box-shadow-hover: var(--osi-section-item-shadow-hover);
-  --section-item-hover-transform: var(--osi-section-item-hover-transform);
-  --section-item-transition-default: var(--osi-section-item-transition);
-  --section-item-transition: var(--osi-section-item-transition);
-
-  // Legacy card variables (theme-aware)
-  --card-border: var(--theme-card-border, 1px solid rgba(146, 153, 158, 0.15));
-  --card-border-hover: var(--theme-card-border-hover, #{$brand-color-15});
-  --card-box-shadow: var(--theme-card-box-shadow, var(--shadow-md));
-  --card-box-shadow-hover: var(--theme-card-box-shadow-hover, var(--shadow-lg));
-  --card-hover-transform: none;
-
-  // Entrance animations
-  --ai-card-entrance-animation: fadeInUpSoft var(--duration-moderate) var(--ease-out-smooth) 10ms 1
-    normal both;
-  --section-entrance-animation: fadeInSoft var(--duration-moderate) var(--ease-out-smooth) 20ms 1
-    normal both;
-  --section-item-entrance-animation: fadeInScaleSoft var(--duration-normal) var(--ease-out-smooth)
-    30ms 1 normal both;
-}
-
-// ============================================
-// 5. THEME COLOR MIXINS
-// ============================================
-
-/// Generate base theme colors (default/dark)
-/// @param {String} $variant - 'demo' or 'integration' (deprecated - now always uses demo values)
-/// @param {Boolean} $is-scoped - If true, outputs for nested context
-@mixin osi-theme-base($variant: "demo", $is-scoped: false) {
-  @if $is-scoped {
-    color-scheme: light dark;
-  }
-
-  @include osi-base-colors();
-
-  --background: #{$osi-color-white};
-  --surface-contrast-color: #{$osi-color-black};
-
-  // Cross-browser color-mix support with token-only fallback
-  @supports (color: color-mix(in srgb, black 50%, white)) {
-    --theme-card-background-hover: color-mix(
-      in srgb,
-      var(--background) 98%,
-      var(--surface-contrast-color) 2%
-    );
-  }
-
-  // Surface tokens - defaults (will be overridden by theme-specific mixins and JavaScript presets)
-  // These are fallback values only - actual values come from osi-theme-dark/light mixins or JavaScript presets
-  --theme-ai-card-border: 1px solid rgba(0, 0, 0, 0.08);
-  --theme-ai-card-border-hover: 1px solid rgba(255, 121, 0, 0.4);
-  --theme-ai-card-background: rgba(255, 255, 255, 0.85);
-  --theme-ai-card-background-hover: rgba(255, 255, 255, 0.92);
-  --theme-ai-card-box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.1), 0 0 18px rgba(255, 121, 0, 0.15);
-  --theme-ai-card-box-shadow-hover:
-    0 20px 40px -5px rgba(0, 0, 0, 0.15), 0 0 24px rgba(255, 121, 0, 0.25),
-    0 0 0 1px rgba(255, 121, 0, 0.15);
-  --theme-ai-card-backdrop-filter: blur(12px);
-  --theme-ai-card-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-
-  --theme-card-border: 1px solid rgba(0, 0, 0, 0.08);
-  --theme-card-border-hover: var(--color-brand);
-  --theme-card-background: var(--background);
-  --theme-card-background-hover: color-mix(
-    in srgb,
-    var(--background) 98%,
-    var(--surface-contrast-color) 2%
-  );
-  --theme-card-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  --theme-card-box-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.07);
-
-  --theme-section-border: 1px solid rgba(0, 0, 0, 0.06);
-  --theme-section-border-hover: 1px solid rgba(255, 121, 0, 0.15);
-  --theme-section-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
-  --theme-section-box-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.05);
-  --theme-section-transition:
-    border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
-  // Flat backgrounds - no color-mix
-  --section-background: var(--background);
-  --section-background-hover: var(--background);
-  --section-surface: var(--background);
-  --section-surface-hover: var(--background);
-
-  --theme-section-item-border: 1px solid rgba(0, 0, 0, 0.06);
-  --theme-section-item-border-hover: 1px solid rgba(255, 121, 0, 0.15);
-  --theme-section-item-background: var(--background);
-  --theme-section-item-background-hover: var(--background);
-  --theme-section-item-box-shadow: var(--shadow-md, 0 1px 2px rgba(0, 0, 0, 0.04));
-  --theme-section-item-box-shadow-hover: var(--shadow-lg, 0 1px 3px rgba(0, 0, 0, 0.05));
-  --theme-section-item-hover-transform: none;
-  --theme-section-item-transition:
-    border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
-    box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/// Generate dark theme colors
-/// @param {String} $variant - 'demo' or 'integration' (deprecated - now always uses demo values)
-/// @param {Boolean} $is-scoped - If true, outputs for nested context
-@mixin osi-theme-dark($variant: "demo", $is-scoped: false) {
-  @if $is-scoped {
-    color-scheme: dark;
-    --background: #{$osi-background-dark-scoped};
-  } @else {
-    --background: #{$osi-background-dark};
-  }
-  --surface-contrast-color: #{$osi-color-white};
-  --foreground: #{$osi-foreground-dark};
-  --muted: #242424;
-  --muted-foreground: #{$osi-muted-foreground-dark};
-
-  // Flat dark backgrounds - no color-mix
-  --card: var(--background);
-  --card-surface: var(--background);
-  --card-foreground: #{$osi-foreground-dark};
-  --card-surface-hover: var(--background);
-  --card-section-bg: #181818;
-  --card-section-card-bg: #1f1f1f;
-
-  // AI Card surface - transparent with blur effect (matches preset)
-  --theme-ai-card-border: 1px solid rgba(255, 255, 255, 0.08);
-  --theme-ai-card-border-hover: 1px solid rgba(255, 121, 0, 0.2);
-  --theme-ai-card-background: rgba(20, 20, 20, 0.6);
-  --theme-ai-card-background-hover: rgba(25, 25, 25, 0.7);
-  --theme-ai-card-box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
-  --theme-ai-card-box-shadow-hover:
-    0 12px 32px -4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 121, 0, 0.1);
-  --theme-ai-card-backdrop-filter: blur(12px);
-  --theme-ai-card-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-
-  // Card backgrounds (matches preset)
-  --theme-card-border: 1px solid rgba(255, 255, 255, 0.08);
-  --theme-card-border-hover: 1px solid rgba(255, 121, 0, 0.2);
-  --theme-card-background: var(--background);
-  // Fallback for browsers without color-mix support
-  --theme-card-background-hover: rgba(25, 25, 25, 0.7);
-  --theme-card-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
-  --theme-card-box-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.4);
-
-  // Flat section backgrounds
-  --section-background: var(--background);
-  --section-background-hover: var(--background);
-  --section-surface: #181818;
-  --section-surface-hover: #1f1f1f;
-  --popover: #111111;
-  --popover-foreground: #{$osi-foreground-dark};
-  --primary: #{$osi-color-brand};
-  --primary-foreground: #{$osi-foreground-dark};
-  --secondary: #333333;
-  --secondary-foreground: #{$osi-foreground-dark};
-  --accent: #{$osi-color-brand};
-  --accent-foreground: #{$osi-color-black};
-  --destructive: #d4183d;
-  --destructive-foreground: #{$osi-foreground-dark};
-  --border: rgba(200, 200, 200, 0.3);
-  --input: transparent;
-  --input-background: #222222;
-  --switch-background: #333333;
-  --ring: #{$brand-color-60};
-  --chart-1: #{$osi-color-brand};
-  --chart-2: #{$osi-color-brand-light};
-  --chart-3: #{$osi-color-brand-dark};
-  --chart-4: #{$osi-color-brand-pale};
-  --chart-5: #ff4500;
-
-  // Element type overrides - subtle theme-aware hover
-  --hero-card-border: 1px solid rgba(233, 233, 233, 0.2);
-  --hero-card-border-hover: 1px solid rgba(255, 121, 0, 0.25);
-  // Section (matches preset)
-  --theme-section-border: 1px solid rgba(255, 255, 255, 0.1);
-  --theme-section-border-hover: 1px solid rgba(255, 255, 255, 0.1);
-  --theme-section-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-  --theme-section-box-shadow-hover: 0 2px 5px rgba(0, 0, 0, 0.5);
-  --theme-section-transition:
-    border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
-  // Section Item (matches preset)
-  --theme-section-item-border: 1px solid rgba(255, 255, 255, 0.06);
-  --theme-section-item-border-hover: 1px solid rgba(255, 121, 0, 0.08);
-  --theme-section-item-background: #202020;
-  --theme-section-item-background-hover: #212121;
-  --theme-section-item-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
-  --theme-section-item-box-shadow-hover: 0 1px 4px rgba(0, 0, 0, 0.3);
-  --theme-section-item-hover-transform: none;
-  --theme-section-item-transition:
-    background 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/// Generate light theme colors
-/// @param {String} $variant - 'demo' or 'integration' (deprecated - now always uses demo values)
-/// @param {Boolean} $is-scoped - If true, outputs for nested context
-@mixin osi-theme-light($variant: "demo", $is-scoped: false) {
-  @if $is-scoped {
-    color-scheme: light;
-  }
-  --background: #{$osi-background-light};
-  --foreground: #{$osi-foreground-light};
-  --muted: #f4f4f6;
-  --muted-foreground: #{$osi-muted-foreground-light};
-
-  // Cross-browser color-mix support with token-only fallback
-  @supports (color: color-mix(in srgb, black 50%, white)) {
-    --theme-card-background-hover: color-mix(
-      in srgb,
-      var(--background) 98%,
-      var(--surface-contrast-color) 2%
-    );
-  }
-
-  // Flat light backgrounds - no color-mix
-  --card: var(--background);
-  --card-surface: var(--background);
-  --card-foreground: #{$osi-foreground-light};
-  --card-surface-hover: var(--background);
-  --card-section-bg: #fcfcfc;
-  --card-section-card-bg: #f8f8f8;
-
-  // AI Card surface - light theme with blur (matches preset)
-  --theme-ai-card-border: 1px solid rgba(0, 0, 0, 0.08);
-  --theme-ai-card-border-hover: 1px solid rgba(255, 121, 0, 0.2);
-  --theme-ai-card-background: rgba(255, 255, 255, 0.85);
-  --theme-ai-card-background-hover: rgba(255, 255, 255, 0.88);
-  --theme-ai-card-box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.1), 0 0 18px rgba(255, 121, 0, 0.15);
-  --theme-ai-card-box-shadow-hover:
-    0 12px 32px -4px rgba(0, 0, 0, 0.12), 0 0 20px rgba(255, 121, 0, 0.18),
-    0 0 0 1px rgba(255, 121, 0, 0.1);
-  --theme-ai-card-backdrop-filter: blur(12px);
-  --theme-ai-card-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-
-  // Card backgrounds (matches preset)
-  --theme-card-border: 1px solid rgba(0, 0, 0, 0.08);
-  --theme-card-border-hover: 1px solid rgba(255, 121, 0, 0.2);
-  --theme-card-background: var(--background);
-  // Fallback for browsers without color-mix support
-  --theme-card-background-hover: rgba(255, 255, 255, 0.88);
-  --theme-card-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  --theme-card-box-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.06);
-
-  // Flat section backgrounds
-  --section-background: var(--background);
-  --section-background-hover: var(--background);
-  --section-surface: #fcfcfc;
-  --section-surface-hover: #f8f8f8;
-  --popover: #{$osi-color-white};
-  --popover-foreground: #1a1a1a;
-  --primary: #{$osi-color-brand};
-  --primary-foreground: #{$osi-color-white};
-  --secondary: #f5f5f5;
-  --secondary-foreground: #1a1a1a;
-  --accent: #{$osi-color-brand};
-  --accent-foreground: #{$osi-color-white};
-  --destructive: #d4183d;
-  --destructive-foreground: #{$osi-color-white};
-  --border: rgba(200, 200, 200, 0.5);
-  --input: transparent;
-  --input-background: #f9f9f9;
-  --switch-background: #e5e5e5;
-  --ring: #{$brand-color-40};
-  --chart-1: #{$osi-color-brand};
-  --chart-2: #{$osi-color-brand-light};
-  --chart-3: #{$osi-color-brand-dark};
-  --chart-4: #{$osi-color-brand-pale};
-  --chart-5: #ff4500;
-
-  // Light theme gray overrides
-  --color-gray-700: #e0e0e0;
-  --color-gray-600: #d0d0d0;
-
-  // Element type overrides - subtle theme-aware hover
-  --hero-card-border: 1px solid rgba(146, 153, 158, 0.25);
-  --hero-card-border-hover: 1px solid rgba(255, 121, 0, 0.2);
-  // Section (matches preset)
-  --theme-section-border: 1px solid rgba(0, 0, 0, 0.08);
-  --theme-section-border-hover: 1px solid rgba(0, 0, 0, 0.1);
-  --theme-section-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-  --theme-section-box-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.07);
-  --theme-section-transition:
-    border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
-  // Section Item (matches preset)
-  --theme-section-item-border: 1px solid rgba(0, 0, 0, 0.06);
-  --theme-section-item-border-hover: 1px solid rgba(255, 121, 0, 0.08);
-  --theme-section-item-background: #f9f9f9;
-  --theme-section-item-background-hover: #f7f7f7;
-  --theme-section-item-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-  --theme-section-item-box-shadow-hover: 0 1px 3px rgba(0, 0, 0, 0.05);
-  --theme-section-item-hover-transform: none;
-  --theme-section-item-transition:
-    background 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 220ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-// ============================================
-// 6. MAIN TOKEN GENERATION MIXIN
-// ============================================
-
-/// Generate all design tokens
-/// @param {String} $variant - 'demo' for larger demo app, 'integration' for compact OSA
-/// @param {Boolean} $is-scoped - If true, outputs for nested context
-@mixin osi-tokens($variant: "demo", $is-scoped: false) {
-  @include osi-shadows();
-  @include osi-radius();
-
-  // Cross-browser color-mix support for section title hover color
-  @supports (color: color-mix(in srgb, black 50%, white)) {
-    --osi-section-title-hover-color: color-mix(
-      in srgb,
-      var(--color-brand) 70%,
-      var(--color-white) 30%
-    );
-  }
-  @include osi-spacing();
-  @include osi-z-index();
-  @include osi-animation();
-  @include osi-opacity();
-  @include osi-typography($variant);
-  @include osi-card-typography($variant);
-  @include osi-card-layout();
-  @include osi-card-text-colors();
-  @include osi-card-surfaces();
-  @include osi-status-colors();
-  @include osi-interactive();
-  @include osi-element-system();
-}
-
-/// Generate reduced motion overrides
-@mixin osi-tokens-reduced-motion() {
-  --duration-instant: 1ms;
-  --duration-fast: 1ms;
-  --duration-normal: 1ms;
-  --duration-moderate: 1ms;
-  --duration-slow: 1ms;
-  --duration-slower: 1ms;
-  --duration-slowest: 1ms;
-  --stagger-delay-base: 0ms;
-  --stagger-delay-fast: 0ms;
-  --stagger-delay-slow: 0ms;
-  --ai-card-entrance-animation: none;
-  --section-entrance-animation: none;
-  --section-item-entrance-animation: none;
-}
-
-/// Generate high contrast mode overrides
-@mixin osi-tokens-high-contrast() {
-  --foreground: #{$osi-color-white};
-  --background: #{$osi-color-black};
-  --muted-foreground: #{$osi-color-white};
-  --muted: #{$osi-color-black};
-  --border: #{$osi-color-white};
-  --card: #{$osi-color-black};
-  --card-foreground: #{$osi-color-white};
-  --ai-card-border: 2px solid #{$osi-color-white};
-  --section-border: 2px solid #{$osi-color-white};
-  --button-border: 2px solid #{$osi-color-white};
-  --card-background: #{$osi-color-black};
-  --card-background-hover: #1a1a1a;
-  --section-item-background: #{$osi-color-black};
-  --section-item-background-hover: #1a1a1a;
-}
-
-/// Generate forced colors mode overrides
-@mixin osi-tokens-forced-colors() {
-  --foreground: ButtonText;
-  --background: Canvas;
-  --border: ButtonBorder;
-  --card: Canvas;
-  --card-foreground: ButtonText;
-}
-
-// ============================================
-// 7. CSS PROPERTY HELPER MIXINS (for Bootstrap overrides)
-// ============================================
-
-// These mixins allow applying !important when needed
-@mixin display($value) {
-  display: $value !important;
-}
-
-@mixin flex-direction($value) {
-  flex-direction: $value !important;
-}
-
-@mixin gap($value) {
-  gap: $value !important;
-}
-
-@mixin width($value) {
-  width: $value !important;
-}
-
-@mixin min-height($value) {
-  min-height: $value !important;
-}
-
-@mixin box-sizing($value) {
-  box-sizing: $value !important;
-}
-
-@mixin grid-columns($value) {
-  grid-template-columns: $value !important;
-}