osi-cards-lib 1.2.2 → 1.3.0

package/fesm2022/osi-cards-lib.mjs

@@ -5801,6 +5801,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Output
             }] } });
 
+/**
+ * OsiCardsContainerComponent
+ *
+ * A wrapper component that automatically applies the `.osi-cards-container` class
+ * to encapsulate OSI Cards styles and prevent CSS leakage into the host application.
+ *
+ * @example
+ * ```html
+ * <osi-cards-container>
+ *   <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
+ * </osi-cards-container>
+ * ```
+ *
+ * @example
+ * With theme support:
+ * ```html
+ * <osi-cards-container [theme]="'night'">
+ *   <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
+ * </osi-cards-container>
+ * ```
+ */
+class OsiCardsContainerComponent {
+    /**
+     * Computed container class name.
+     * Always includes 'osi-cards-container' base class.
+     */
+    get containerClass() {
+        return 'osi-cards-container';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OsiCardsContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: OsiCardsContainerComponent, isStandalone: true, selector: "osi-cards-container", ngImport: i0, template: `
+    <div [class]="containerClass" [attr.data-theme]="theme">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: OsiCardsContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'osi-cards-container', standalone: true, template: `
+    <div [class]="containerClass" [attr.data-theme]="theme">
+      <ng-content></ng-content>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+        }] });
+
 /**
  * Card Header Component
  *
@@ -6236,12 +6281,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * You may need to import from the main application source or
  * extend the library exports. See integration documentation for details.
  *
- * Styles entry point: 'osi-cards-lib/styles/_styles.scss'
+ * Styles entry points:
+ * - 'osi-cards-lib/styles/_styles.scss' (global styles - may affect host app)
+ * - 'osi-cards-lib/styles/_styles-scoped.scss' (scoped styles - recommended for integration)
+ *
+ * For scoped styles, wrap components in <osi-cards-container> or use class="osi-cards-container"
  */
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AICardRendererComponent, AnalyticsSectionComponent, BaseSectionComponent, BrandColorsSectionComponent, CardBodyComponent, CardDiffUtil, CardFooterComponent, CardHeaderComponent, CardPreviewComponent, CardSkeletonComponent, CardTypeGuards, CardUtils, ChartSectionComponent, ContactCardSectionComponent, EventMiddlewareService, EventSectionComponent, FallbackSectionComponent, FinancialsSectionComponent, IconService, InfoSectionComponent, ListSectionComponent, LucideIconsModule, MagneticTiltService, MapSectionComponent, MasonryGridComponent, NetworkCardSectionComponent, NewsSectionComponent, OverviewSectionComponent, PresetFactory, ProductSectionComponent, QuotationSectionComponent, SectionNormalizationService, SectionPluginRegistry, SectionRendererComponent, SectionUtilsService, SocialMediaSectionComponent, SolutionsSectionComponent, TextReferenceSectionComponent, ThemeService, areStylesLoaded, buildThemeFromBase, cloneCardConfig, createAnalyticsDashboard, createAnalyticsPreset, createCardFromPartial, createCompanyCard, createCompanyPreset, createContactCard, createContactPreset, createEmptyCard, createEnhancedCompanyCard, createErrorCard, createPartialTheme, createSkeletonCard, darkTheme, generateThemeFromPalette, getBreakpointFromWidth, getCSSVariableValue, highContrastTheme, isCSSVariableDefined, isCardComplete, lightTheme, mergeCardConfig, mergeSections, mergeThemes, prepareCardForStreaming, provideOSICards, updateCardIncremental, validateAndWarnStyles, validateCSSVariableNames, validateCardConfig, validateStyles, waitForStyles };
+export { AICardRendererComponent, AnalyticsSectionComponent, BaseSectionComponent, BrandColorsSectionComponent, CardBodyComponent, CardDiffUtil, CardFooterComponent, CardHeaderComponent, CardPreviewComponent, CardSkeletonComponent, CardTypeGuards, CardUtils, ChartSectionComponent, ContactCardSectionComponent, EventMiddlewareService, EventSectionComponent, FallbackSectionComponent, FinancialsSectionComponent, IconService, InfoSectionComponent, ListSectionComponent, LucideIconsModule, MagneticTiltService, MapSectionComponent, MasonryGridComponent, NetworkCardSectionComponent, NewsSectionComponent, OsiCardsContainerComponent, OverviewSectionComponent, PresetFactory, ProductSectionComponent, QuotationSectionComponent, SectionNormalizationService, SectionPluginRegistry, SectionRendererComponent, SectionUtilsService, SocialMediaSectionComponent, SolutionsSectionComponent, TextReferenceSectionComponent, ThemeService, areStylesLoaded, buildThemeFromBase, cloneCardConfig, createAnalyticsDashboard, createAnalyticsPreset, createCardFromPartial, createCompanyCard, createCompanyPreset, createContactCard, createContactPreset, createEmptyCard, createEnhancedCompanyCard, createErrorCard, createPartialTheme, createSkeletonCard, darkTheme, generateThemeFromPalette, getBreakpointFromWidth, getCSSVariableValue, highContrastTheme, isCSSVariableDefined, isCardComplete, lightTheme, mergeCardConfig, mergeSections, mergeThemes, prepareCardForStreaming, provideOSICards, updateCardIncremental, validateAndWarnStyles, validateCSSVariableNames, validateCardConfig, validateStyles, waitForStyles };
 //# sourceMappingURL=osi-cards-lib.mjs.map

package/index.d.ts

@@ -1966,6 +1966,42 @@ declare class CardPreviewComponent implements OnInit, OnChanges, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<CardPreviewComponent, "app-card-preview", never, { "generatedCard": { "alias": "generatedCard"; "required": false; }; "isGenerating": { "alias": "isGenerating"; "required": false; }; "isInitialized": { "alias": "isInitialized"; "required": false; }; "isFullscreen": { "alias": "isFullscreen"; "required": false; }; }, { "cardInteraction": "cardInteraction"; "fieldInteraction": "fieldInteraction"; "fullscreenToggle": "fullscreenToggle"; "agentAction": "agentAction"; "questionAction": "questionAction"; }, never, never, true, never>;
 }
 
+/**
+ * OsiCardsContainerComponent
+ *
+ * A wrapper component that automatically applies the `.osi-cards-container` class
+ * to encapsulate OSI Cards styles and prevent CSS leakage into the host application.
+ *
+ * @example
+ * ```html
+ * <osi-cards-container>
+ *   <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
+ * </osi-cards-container>
+ * ```
+ *
+ * @example
+ * With theme support:
+ * ```html
+ * <osi-cards-container [theme]="'night'">
+ *   <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
+ * </osi-cards-container>
+ * ```
+ */
+declare class OsiCardsContainerComponent {
+    /**
+     * Theme to apply to the container.
+     * Can be 'day', 'night', or undefined (default).
+     */
+    theme?: 'day' | 'night';
+    /**
+     * Computed container class name.
+     * Always includes 'osi-cards-container' base class.
+     */
+    get containerClass(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OsiCardsContainerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OsiCardsContainerComponent, "osi-cards-container", never, {}, {}, never, ["*"], true, never>;
+}
+
 /**
  * Card Header Component
  *
@@ -2425,5 +2461,5 @@ declare class TextReferenceSectionComponent extends BaseSectionComponent<TextRef
     static ɵcmp: i0.ɵɵComponentDeclaration<TextReferenceSectionComponent, "app-text-reference-section", never, {}, {}, never, never, true, never>;
 }
 
-export { AICardRendererComponent, AnalyticsSectionComponent, BaseSectionComponent, BrandColorsSectionComponent, CardBodyComponent, CardDiffUtil, CardFooterComponent, CardHeaderComponent, CardPreviewComponent, CardSkeletonComponent, CardTypeGuards, CardUtils, ChartSectionComponent, ContactCardSectionComponent, EventMiddlewareService, EventSectionComponent, FallbackSectionComponent, FinancialsSectionComponent, IconService, InfoSectionComponent, ListSectionComponent, LucideIconsModule, MagneticTiltService, MapSectionComponent, MasonryGridComponent, NetworkCardSectionComponent, NewsSectionComponent, OverviewSectionComponent, PresetFactory, ProductSectionComponent, QuotationSectionComponent, SectionNormalizationService, SectionPluginRegistry, SectionRendererComponent, SectionUtilsService, SocialMediaSectionComponent, SolutionsSectionComponent, TextReferenceSectionComponent, ThemeService, areStylesLoaded, buildThemeFromBase, cloneCardConfig, createAnalyticsDashboard, createAnalyticsPreset, createCardFromPartial, createCompanyCard, createCompanyPreset, createContactCard, createContactPreset, createEmptyCard, createEnhancedCompanyCard, createErrorCard, createPartialTheme, createSkeletonCard, darkTheme, generateThemeFromPalette, getBreakpointFromWidth, getCSSVariableValue, highContrastTheme, isCSSVariableDefined, isCardComplete, lightTheme, mergeCardConfig, mergeSections, mergeThemes, prepareCardForStreaming, provideOSICards, updateCardIncremental, validateAndWarnStyles, validateCSSVariableNames, validateCardConfig, validateStyles, waitForStyles };
+export { AICardRendererComponent, AnalyticsSectionComponent, BaseSectionComponent, BrandColorsSectionComponent, CardBodyComponent, CardDiffUtil, CardFooterComponent, CardHeaderComponent, CardPreviewComponent, CardSkeletonComponent, CardTypeGuards, CardUtils, ChartSectionComponent, ContactCardSectionComponent, EventMiddlewareService, EventSectionComponent, FallbackSectionComponent, FinancialsSectionComponent, IconService, InfoSectionComponent, ListSectionComponent, LucideIconsModule, MagneticTiltService, MapSectionComponent, MasonryGridComponent, NetworkCardSectionComponent, NewsSectionComponent, OsiCardsContainerComponent, OverviewSectionComponent, PresetFactory, ProductSectionComponent, QuotationSectionComponent, SectionNormalizationService, SectionPluginRegistry, SectionRendererComponent, SectionUtilsService, SocialMediaSectionComponent, SolutionsSectionComponent, TextReferenceSectionComponent, ThemeService, areStylesLoaded, buildThemeFromBase, cloneCardConfig, createAnalyticsDashboard, createAnalyticsPreset, createCardFromPartial, createCompanyCard, createCompanyPreset, createContactCard, createContactPreset, createEmptyCard, createEnhancedCompanyCard, createErrorCard, createPartialTheme, createSkeletonCard, darkTheme, generateThemeFromPalette, getBreakpointFromWidth, getCSSVariableValue, highContrastTheme, isCSSVariableDefined, isCardComplete, lightTheme, mergeCardConfig, mergeSections, mergeThemes, prepareCardForStreaming, provideOSICards, updateCardIncremental, validateAndWarnStyles, validateCSSVariableNames, validateCardConfig, validateStyles, waitForStyles };
 export type { AICardConfig, AgentCardAction, AnalyticsDashboardOptions, Breakpoint, CardAction, CardActionButtonType, CardChangeType, CardDiffResult, CardField, CardFieldInteractionEvent, CardItem, CardSection, CardType, CompanyCardOptions, ContactCardOptions, EmailConfig, EmailContact, EventFilter, EventHandler, EventMiddleware, EventTransformer, InfoSectionFieldInteraction, LegacyCardAction, MailCardAction, MasonryLayoutInfo, MousePosition, OSICardsLibConfig, OSICardsThemeConfig, PriorityValue, QuestionCardAction, RegisteredSectionPlugin, SectionInteraction, SectionPlugin, SectionPluginConfig, SectionPluginMetadata, SectionRenderEvent, StatusValue, StreamingStage, StyleValidationResult, ThemePreset, TiltCalculations, TrendValue, WebsiteCardAction };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "osi-cards-lib",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "Standalone OSI Cards library for Angular applications",
   "keywords": [
     "angular",
@@ -54,6 +54,12 @@
     },
     "./styles/_styles.scss": {
       "default": "./styles/_styles.scss"
+    },
+    "./styles/_styles-scoped": {
+      "default": "./styles/_styles-scoped.scss"
+    },
+    "./styles/_styles-scoped.scss": {
+      "default": "./styles/_styles-scoped.scss"
     }
   },
   "main": "./fesm2022/osi-cards-lib.mjs",

package/styles/_styles-scoped.scss

@@ -0,0 +1,107 @@
+/* ===================================================================
+   SCOPED OSI CARDS STYLES - Encapsulated to Prevent CSS Leakage
+   =================================================================== */
+/* 
+ * This stylesheet wraps all OSI Cards styles in .osi-cards-container
+ * to prevent CSS from affecting the host application.
+ * 
+ * Usage:
+ *   1. Import this file instead of _styles.scss
+ *   2. Wrap your OSI Cards components in <div class="osi-cards-container">
+ * 
+ * Example:
+ *   <div class="osi-cards-container">
+ *     <app-ai-card-renderer [cardConfig]="card"></app-ai-card-renderer>
+ *   </div>
+ */
+
+.osi-cards-container {
+  // Core variables and mixins (must come first)
+  @import 'core/variables-scoped';
+  @import 'core/mixins';
+  @import 'core/surface-layers';
+  @import 'core/global-scoped';
+  @import 'core/utilities';
+  @import 'core/animations';
+
+  // Layout styles
+  @import 'layout/tilt';
+  @import 'layout/masonry';
+
+  // Component styles
+  @import 'components/cards/ai-card';
+  @import 'components/sections/design-system'; /* Master design system - must import first */
+  @import 'components/sections/sections-base';
+  @import 'components/sections/section-types';
+  @import 'components/sections/section-shell';
+  @import 'components/sections/overview';
+  @import 'components/sections/analytics';
+  @import 'components/sections/news';
+  @import 'components/sections/social-media';
+  @import 'components/sections/info';
+  @import 'components/sections/map';
+  @import 'components/sections/list';
+  @import 'components/sections/contact';
+  @import 'components/sections/network';
+  @import 'components/sections/product';
+  @import 'components/sections/chart';
+  @import 'components/sections/event';
+  @import 'components/sections/financials';
+  @import 'components/sections/solutions';
+  @import 'components/sections/quotation';
+  @import 'components/sections/text-reference';
+  @import 'components/sections/brand-colors';
+  @import 'components/sections/fallback';
+  @import 'components/sections/unified-cards'; /* Must be last to override all section-specific styles */
+  @import 'components/sections/global-enforcement'; /* GLOBAL ENFORCEMENT - MUST BE ABSOLUTELY LAST to enforce all settings */
+
+  /* FINAL OVERRIDE - ABSOLUTELY NO BORDERS OR BORDER-LIKE EFFECTS */
+  h1.ai-card-title,
+  .ai-card-title,
+  article.ai-card-surface h1,
+  .ai-card-surface > h1,
+  .ai-card-surface .ai-card-title {
+    border: 0 !important;
+    border-width: 0 !important;
+    border-style: none !important;
+    border-top-width: 0 !important;
+    border-right-width: 0 !important;
+    border-bottom-width: 0 !important;
+    border-left-width: 0 !important;
+    box-shadow: none !important;
+    outline: 0 !important;
+    outline-width: 0 !important;
+    text-decoration: none !important;
+    background-image: none !important;
+    
+    &::before,
+    &::after {
+      display: none !important;
+      content: none !important;
+      border: 0 !important;
+      box-shadow: none !important;
+      background: none !important;
+    }
+  }
+
+  /* Remove all styling from parent container */
+  .relative.h-full,
+  div[class*="relative"][class*="h-full"] {
+    position: static !important;
+    height: auto !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border: 0 !important;
+    background: none !important;
+    box-shadow: none !important;
+  }
+
+  /* Also ensure article itself has no borders */
+  article.ai-card-surface,
+  .ai-card-surface {
+    border: 0 !important;
+    border-width: 0 !important;
+    outline: 0 !important;
+  }
+}
+

package/styles/core/_global-scoped.scss

@@ -0,0 +1,114 @@
+/* ===================================================================
+   SCOPED GLOBAL STYLES - Encapsulated for OSI Cards Container
+   =================================================================== */
+/* These styles only apply within .osi-cards-container to prevent CSS leakage */
+
+.osi-cards-container,
+.osi-cards-container * {
+  box-sizing: border-box;
+}
+
+.osi-cards-container {
+  /* Scoped reset - only affects elements within container */
+  * {
+    margin: 0;
+    padding: 0;
+    outline-color: var(--ring, var(--osi-ring, #FF7900));
+  }
+
+  /* Scoped HTML element styles */
+  html {
+    font-size: var(--font-size, var(--osi-font-size, 16px));
+  }
+
+  /* Scoped body styles - only if body has the container class */
+  &.body,
+  body & {
+    font-family: Helvetica, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+    background-color: var(--background, var(--osi-background, transparent));
+    color: var(--foreground, var(--osi-foreground, inherit));
+    line-height: 1.5;
+    
+    /* Improved text rendering for sharpness */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-feature-settings: 'kern' 1;
+  }
+
+  /* Scoped button styles */
+  button {
+    cursor: pointer;
+    font-family: inherit;
+    
+    // Enhanced focus indicators for accessibility
+    &:focus-visible {
+      outline: 2px solid var(--color-brand, var(--osi-color-brand, #FF7900));
+      outline-offset: 2px;
+      border-radius: 4px;
+    }
+    
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
+  }
+
+  // Scoped focus styles for all interactive elements
+  a,
+  button,
+  input,
+  select,
+  textarea,
+  [tabindex]:not([tabindex="-1"]) {
+    &:focus-visible {
+      outline: 2px solid var(--color-brand, var(--osi-color-brand, #FF7900));
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
+    
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
+  }
+
+  /* Scoped heading styles */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    line-height: 1.2;
+    font-family: Helvetica, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+  }
+
+  h1 {
+    font-size: var(--text-2xl, var(--osi-text-2xl, 1.375rem));
+    font-weight: var(--font-weight-medium, var(--osi-font-weight-medium, 500));
+  }
+
+  h2 {
+    font-size: var(--text-xl, var(--osi-text-xl, 1.125rem));
+    font-weight: var(--font-weight-medium, var(--osi-font-weight-medium, 500));
+  }
+
+  h3 {
+    font-size: var(--text-lg, var(--osi-text-lg, 1rem));
+    font-weight: var(--font-weight-medium, var(--osi-font-weight-medium, 500));
+  }
+
+  h4 {
+    font-size: var(--text-base, var(--osi-text-base, 0.875rem));
+    font-weight: var(--font-weight-medium, var(--osi-font-weight-medium, 500));
+  }
+
+  /* Scoped paragraph styles */
+  p {
+    font-size: var(--text-base, var(--osi-text-base, 0.875rem));
+    font-weight: var(--font-weight-normal, var(--osi-font-weight-normal, 400));
+    line-height: 1.5;
+    margin: 0;
+  }
+}
+

package/styles/core/_variables-scoped.scss

@@ -0,0 +1,429 @@
+/* ===================================================================
+   SCOPED CSS VARIABLES - Encapsulated for OSI Cards Container
+   =================================================================== */
+/* Variables are scoped to .osi-cards-container to prevent CSS leakage */
+/* Essential variables are also available on :root with --osi- prefix for fallback */
+
+/* Import theme colors - these will be scoped */
+@import 'variables/colors-scoped';
+
+/* Scoped variables within container */
+.osi-cards-container {
+  /* ===== BASE DESIGN TOKENS ===== */
+  --font-size-base: 14px;
+  --radius-base: 0.625rem;
+  --spacing-base: 0.25rem;
+  
+  /* Base text scale - for reference and general use */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+  --text-7xl: 4.5rem;
+  
+  /* Base radius scale */
+  --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;
+  
+  /* ===== UNIFIED CARD SYSTEM ===== */
+  --card-main-padding: 16px;
+  --card-padding-vertical: 12px;
+  --card-padding-horizontal: 16px;
+  --card-padding: 16px;
+  --card-padding-large: 20px;
+  --section-padding: 16px;
+  --card-min-height: auto;
+  --card-gap: clamp(6px, 0.6vw, 10px);
+  --card-gap-large: clamp(10px, 0.8vw, 14px);
+  
+  /* Nested Element Spacing */
+  --card-nested-gap: clamp(3px, 0.4vw, 6px);
+  --section-header-gap: clamp(3px, 0.4vw, 6px);
+  --section-header-padding-bottom: clamp(3px, 0.4vw, 6px);
+  
+  /* Card Backgrounds */
+  --card-background: var(--ai-card-background, rgba(255, 121, 0, 0.025));
+  --card-background-hover: var(--ai-card-background-hover, rgba(255, 121, 0, 0.055));
+  
+  /* ===== 5 ELEMENT TYPE SYSTEM ===== */
+  /* 1. HERO CARDS */
+  --hero-card-border: 1px solid rgba(146, 153, 158, 0.15);
+  --hero-card-border-hover: rgba(255, 121, 0, 0.4);
+  --hero-card-background: var(--card);
+  --hero-card-background-hover: var(--card);
+  --hero-card-border-radius: 10px;
+  --hero-card-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --hero-card-box-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.12);
+  --hero-card-hover-transform: translateY(-2px);
+  
+  /* 2. BUTTONS & SELECTORS */
+  --button-border: 1px solid transparent;
+  --button-border-hover: 1px solid rgba(255, 121, 0, 0.4);
+  --button-background: var(--primary);
+  --button-background-hover: color-mix(in srgb, var(--primary) 85%, transparent);
+  --button-border-radius: 8px;
+  --button-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  --button-box-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.12);
+  --button-hover-transform: translateY(-1px);
+  
+  /* 3. CARDS (.ai-card-surface) */
+  --ai-card-border: var(--theme-ai-card-border, none);
+  --ai-card-border-hover: var(--theme-ai-card-border-hover, var(--ai-card-border));
+  --ai-card-background: var(--theme-ai-card-background, var(--card-surface, var(--card-section-bg)));
+  --ai-card-background-hover: var(--theme-ai-card-background-hover, var(--card-surface-hover, var(--card-section-bg)));
+  --ai-card-border-radius: 12px;
+  --ai-card-box-shadow: var(--theme-ai-card-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.08));
+  --ai-card-box-shadow-hover: var(--theme-ai-card-box-shadow-hover, 0 4px 16px rgba(0, 0, 0, 0.12));
+  --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 (.masonry-item) */
+  --section-border: var(--theme-section-border, 1px solid rgba(255, 255, 255, 0.04));
+  --section-border-hover: var(--theme-section-border-hover, 1px solid rgba(255, 121, 0, 0.15));
+  --section-border-radius: var(--card-border-radius);
+  --section-box-shadow-default: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.02);
+  --section-box-shadow-hover-default: 0 4px 12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 121, 0, 0.08);
+  --section-box-shadow: var(--theme-section-box-shadow, var(--section-box-shadow-default));
+  --section-box-shadow-hover: var(--theme-section-box-shadow-hover, var(--section-box-shadow-hover-default));
+  --section-hover-transform: none;
+  --section-transition: var(--theme-section-transition, none);
+  
+  /* 5. SECTION ITEMS */
+  --section-item-border: var(--theme-section-item-border, 1px solid rgba(255, 255, 255, 0.03));
+  --section-item-border-hover: var(--theme-section-item-border-hover, 1px solid rgba(255, 121, 0, 0.12));
+  --section-item-background: var(--theme-section-item-background, var(--card-section-bg));
+  --section-item-background-hover: var(--theme-section-item-background-hover, color-mix(in srgb, var(--theme-section-item-background, var(--card-section-bg)) 97%, rgba(255, 121, 0, 0.03)));
+  --section-item-border-radius: var(--section-card-border-radius);
+  --section-item-box-shadow: var(--theme-section-item-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.08));
+  --section-item-box-shadow-hover-default: 0 3px 10px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(255, 121, 0, 0.1);
+  --section-item-box-shadow-hover: var(--theme-section-item-box-shadow-hover, var(--section-item-box-shadow-hover-default));
+  --section-item-hover-transform: var(--theme-section-item-hover-transform, none);
+  --section-item-transition-default: background 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  --section-item-transition: var(--theme-section-item-transition, var(--section-item-transition-default));
+  
+  /* Legacy card variables */
+  --card-border: var(--theme-card-border, 1px solid rgba(146, 153, 158, 0.15));
+  --card-border-hover: var(--theme-card-border-hover, rgba(255, 121, 0, 0.4));
+  --card-background: var(--theme-card-background, var(--ai-card-background));
+  --card-background-hover: var(--theme-card-background-hover, var(--ai-card-background-hover));
+  --card-box-shadow: var(--theme-card-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
+  --card-box-shadow-hover: var(--theme-card-box-shadow-hover, 0 4px 12px rgba(0, 0, 0, 0.12));
+
+  /* Border radius */
+  --card-border-radius: 12px;
+  --card-border-radius-large: 16px;
+  --section-card-gap: 12px;
+  --section-card-border-radius: 10px;
+  --section-grid-min-width: 200px;
+  
+  /* Card Hover State Aliases */
+  --card-hover-border: var(--theme-card-hover-border, var(--card-border-hover));
+  --card-hover-background: var(--theme-card-hover-background, var(--card-background-hover));
+  --card-hover-shadow: var(--theme-card-hover-shadow, var(--card-box-shadow-hover));
+  
+  /* Legacy transform effects */
+  --card-hover-transform: var(--theme-card-hover-transform, none);
+  --card-hover-transform-scale: var(--theme-card-hover-transform-scale, none);
+  --card-hover-transform-slide: var(--theme-card-hover-transform-slide, none);
+  --card-box-shadow-hover-lift: var(--theme-card-box-shadow-hover-lift, var(--card-box-shadow-hover));
+  
+  /* ===== UNIFIED TYPOGRAPHY SYSTEM ===== */
+  --section-title-font-size: clamp(1.3rem, 1.15rem + 0.4vw, 1.6rem);
+  --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);
+  --font-size-section-header: var(--section-title-font-size);
+  
+  --card-title-font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.2rem);
+  --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-subtitle-font-size: clamp(0.75rem, 0.67rem + 0.16vw, 0.9rem);
+  --card-subtitle-font-weight: 600;
+  --card-subtitle-letter-spacing: 0.015em;
+  --card-subtitle-line-height: 1.3;
+  
+  --card-label-font-size: clamp(0.58rem, 0.52rem + 0.16vw, 0.72rem);
+  --card-label-font-weight: 800;
+  --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-value-font-size: clamp(0.93rem, 0.85rem + 0.3vw, 1.08rem);
+  --card-value-font-size-large: clamp(1.35rem, 1.2rem + 0.5vw, 1.65rem);
+  --card-value-font-size-xl: clamp(1.8rem, 1.6rem + 0.6vw, 2.1rem);
+  --card-value-font-weight: 700;
+  --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-font-size: clamp(0.68rem, 0.6rem + 0.16vw, 0.84rem);
+  --card-meta-font-weight: 500;
+  --card-meta-line-height: 1.3;
+  
+  --card-text-small-font-size: clamp(0.48rem, 0.42rem + 0.13vw, 0.58rem);
+  
+  /* Card 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);
+  
+  /* Card Transitions */
+  --card-transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  --card-transition-fast: all 0.22s ease;
+  
+  /* 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;
+  
+  /* Legacy font aliases */
+  --font-section-label: var(--card-label-font-size);
+  --font-section-value: var(--card-value-font-size);
+  --font-section-value-lg: var(--card-title-font-size);
+  --font-section-value-xl: var(--card-value-font-size-large);
+  --font-section-value-2xl: var(--card-value-font-size-large);
+  --font-section-description: var(--card-subtitle-font-size);
+  --font-section-role: var(--card-subtitle-font-size);
+  --font-section-tag: var(--card-label-font-size);
+  --font-section-tag-sm: var(--card-label-font-size);
+  --font-section-tag-lg: var(--card-label-font-size);
+  --font-section-meta: var(--card-meta-font-size);
+  --font-section-name: var(--card-title-font-size);
+  
+  /* Chart-specific aliases */
+  --font-chart-label: var(--card-label-font-size);
+  --font-chart-value: var(--card-value-font-size);
+  --font-chart-meta: var(--card-meta-font-size);
+  --font-chart-value-mobile: var(--card-value-font-size);
+  
+  /* Contact-specific aliases */
+  --font-contact-name: var(--card-title-font-size);
+  --font-contact-role: var(--card-subtitle-font-size);
+  --font-contact-meta: var(--card-meta-font-size);
+  
+  /* List-specific aliases */
+  --font-list-title: var(--card-title-font-size);
+  --font-list-subtitle: var(--card-subtitle-font-size);
+  --font-list-meta: var(--card-meta-font-size);
+  
+  /* Overview-specific aliases */
+  --font-overview-label: var(--card-label-font-size);
+  --font-overview-value: var(--card-value-font-size);
+  
+  /* Mobile label aliases */
+  --font-section-label-mobile: var(--card-label-font-size);
+  --font-section-description-mobile: var(--card-subtitle-font-size);
+  
+  /* ===== UNIFIED SPACING SYSTEM ===== */
+  --spacing-xs: clamp(2px, 0.4vw, 6px);
+  --spacing-sm: clamp(4px, 0.6vw, 8px);
+  --spacing-md: clamp(6px, 0.8vw, 12px);
+  --spacing-lg: clamp(8px, 1vw, 14px);
+  --spacing-xl: clamp(10px, 1.2vw, 18px);
+  --spacing-2xl: clamp(12px, 1.4vw, 20px);
+  --spacing-3xl: clamp(14px, 1.6vw, 22px);
+  --spacing-4xl: clamp(16px, 1.8vw, 24px);
+  --spacing-5xl: clamp(18px, 2vw, 28px);
+  --spacing-6xl: clamp(20px, 2.2vw, 32px);
+  --spacing-7xl: clamp(22px, 2.4vw, 36px);
+  --spacing-8xl: clamp(24px, 2.6vw, 40px);
+  --spacing-9xl: clamp(26px, 2.8vw, 44px);
+  --spacing-10xl: clamp(28px, 3vw, 48px);
+  
+  /* Grid Gaps */
+  --grid-gap-xs: 6px;
+  --grid-gap-sm: 8px;
+  --grid-gap-md: 12px;
+  --grid-gap-lg: 16px;
+  --grid-gap-xl: 20px;
+  --grid-gap-2xl: 24px;
+  --grid-gap-3xl: 32px;
+  
+  --section-grid-gap: 8px;
+  --section-grid-gap-mobile: 9px;
+  --section-stack-gap: 12px;
+  --section-stack-gap-mobile: 9px;
+  
+  --grid-gap-xs-mobile: 4px;
+  --grid-gap-sm-mobile: 4px;
+  --grid-gap-md-mobile: 4px;
+  
+  /* Section Item Padding */
+  --section-item-padding: 8px;
+  --section-item-padding-mobile: 6px;
+  --section-item-gap: 6px;
+  --section-item-gap-mobile: 4px;
+  
+  /* Metric Card Padding */
+  --metric-item-padding: 10px 12px;
+  --metric-item-gap: 6px;
+  --metric-item-gap-mobile: 4px;
+  
+  /* List/Contact Item Padding */
+  --list-item-padding: 10px 12px;
+  --list-item-gap: 6px;
+  --list-item-gap-mobile: 4px;
+  
+  /* Internal Card Element Gaps */
+  --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;
+  --card-element-gap-2xl: 10px;
+  
+  /* Tag/Badge Padding */
+  --tag-padding-x: 6px;
+  --tag-padding-y: 3px;
+  --tag-padding-x-sm: 4px;
+  --tag-padding-y-sm: 2px;
+  --tag-padding-x-lg: 7px;
+  --tag-padding-y-lg: 3px;
+  
+  /* Border Accents */
+  --accent-border-width: 3px;
+  --accent-border-width-sm: 2px;
+  
+  /* Icon Sizes */
+  --icon-size-xs: 10px;
+  --icon-size-sm: 13px;
+  --icon-size-md: 16px;
+  --icon-size-lg: 22px;
+  --icon-size-xl: 36px;
+  --icon-size-section: 18px;
+  
+  /* Avatar Sizes */
+  --avatar-size-sm: 32px;
+  --avatar-size-md: 36px;
+  
+  /* Progress Bar */
+  --progress-height: 2px;
+  --progress-margin: 4px 0;
+  
+  /* ===== ANIMATION SYSTEM ===== */
+  --duration-instant: 40ms;
+  --duration-fast: 80ms;
+  --duration-normal: 160ms;
+  --duration-moderate: 220ms;
+  --duration-slow: 300ms;
+  --duration-slower: 380ms;
+  --duration-slowest: 460ms;
+
+  /* Motion Distances & Scale */
+  --motion-distance-xl: 12px;
+  --motion-distance-lg: 10px;
+  --motion-distance-md: 6px;
+  --motion-distance-sm: 4px;
+  --motion-distance-xs: 2px;
+  --motion-scale-soft-start: 0.992;
+  --motion-scale-soft-end: 1;
+  --motion-scale-pop: 1.015;
+  --motion-scale-pulse-min: 0.985;
+  --motion-scale-pulse-max: 1.015;
+
+  /* Animation 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);
+
+  /* Tilt & Interaction Timings */
+  --tilt-duration: 80ms;
+  --tilt-reset-duration: 300ms;
+  --shadow-duration: 100ms;
+  --glow-duration: 120ms;
+  --reflection-duration: 120ms;
+
+  /* Card Interaction Timings */
+  --card-hover-duration: 200ms;
+  --card-hover-delay: 0ms;
+
+  /* Animation Delays */
+  --stagger-delay-base: 25ms;
+  --stagger-delay-fast: 15ms;
+  --stagger-delay-slow: 45ms;
+
+  /* Performance Hints */
+  --animation-fill-mode: both;
+  --animation-play-state: running;
+
+  /* Legacy variables */
+  --master-color: var(--color-brand);
+  --master-color-dark: #CC5F00;
+  --master-color-light: #FF9933;
+  --master-color-pale: #FFE6CC;
+  --bg-color: var(--background);
+  --card-bg: var(--card);
+  --section-bg: var(--muted);
+  --border-color: var(--border);
+  --text-color: var(--foreground);
+  --text-muted: var(--muted-foreground);
+  --primary-color: var(--primary);
+  --primary-contrast: var(--primary-foreground);
+  --secondary-color: var(--secondary);
+  --secondary-contrast: var(--secondary-foreground);
+  --hover-bg: rgba(255, 121, 0, 0.1);
+  --placeholder-bg: rgba(255, 255, 255, 0.05);
+  --font-weight-medium: 500;
+  --font-weight-normal: 400;
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .osi-cards-container {
+    --duration-instant: 1ms;
+    --duration-fast: 1ms;
+    --duration-normal: 1ms;
+    --duration-moderate: 1ms;
+    --duration-slow: 1ms;
+    --duration-slower: 1ms;
+    --duration-slowest: 1ms;
+    
+    --tilt-duration: 1ms;
+    --tilt-reset-duration: 1ms;
+    --shadow-duration: 1ms;
+    --glow-duration: 1ms;
+    --reflection-duration: 1ms;
+    
+    --card-hover-duration: 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;
+  }
+  
+  .osi-cards-container *,
+  .osi-cards-container *::before,
+  .osi-cards-container *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+

package/styles/core/variables/_colors-scoped.scss

@@ -0,0 +1,249 @@
+/* ===================================================================
+   SCOPED COLOR VARIABLES - Encapsulated for OSI Cards Container
+   =================================================================== */
+/* Colors are scoped to .osi-cards-container to prevent CSS leakage */
+
+.osi-cards-container {
+  /* === BRAND & CORE COLORS === */
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-brand: #ff7900;
+  --color-brand-dark: #CC5F00;
+  --color-brand-light: #FF9933;
+
+  /* Grayscale ramp */
+  --color-gray-50: #ffffff;
+  --color-gray-100: #fcfcfc;
+  --color-gray-150: #f7f7f7;
+  --color-gray-200: #f0f0f1;
+  --color-gray-300: #e9e9e9;
+  --color-gray-400: #92999e;
+  --color-gray-500: #5a5f62;
+  --color-gray-600: #343541;
+  --color-gray-700: #2a2a2a;
+  --color-gray-800: #232323;
+  --color-gray-850: #171717;
+  --color-gray-900: #000000;
+
+  --background: #ffffff;
+  --surface-contrast-color: #000000;
+
+  /* Default surface tokens */
+  --theme-ai-card-border: 0.5px solid color-mix(in srgb, var(--color-brand) 49%, transparent);
+  --theme-ai-card-border-hover: 0.5px solid var(--color-brand);
+  --theme-ai-card-background: color-mix(in srgb, var(--background) 99%, var(--surface-contrast-color) 1%);
+  --theme-ai-card-background-hover: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --theme-ai-card-box-shadow: 0 0 18px rgba(255, 121, 0, 0.3);
+  --theme-ai-card-box-shadow-hover: 0 0 24px rgba(255, 121, 0, 0.45);
+  --theme-ai-card-transition: border 0.38s cubic-bezier(0.4, 0, 0.2, 1), background 0.38s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+
+  --theme-card-border: 1px solid rgba(0, 0, 0, 0.16);
+  --theme-card-border-hover: var(--color-brand);
+  --theme-card-hover-border: var(--color-brand);
+  --theme-card-background: color-mix(in srgb, var(--background) 99%, var(--surface-contrast-color) 1%);
+  --theme-card-background-hover: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --theme-card-box-shadow: 0 4px 14px rgba(15, 15, 20, 0.06);
+  --theme-card-box-shadow-hover: 0 10px 24px rgba(10, 10, 16, 0.1);
+  --theme-card-box-shadow-hover-lift: 0 14px 32px rgba(6, 6, 10, 0.12);
+  --theme-card-hover-background: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --theme-card-hover-shadow: 0 14px 30px rgba(8, 8, 12, 0.12);
+
+  --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 8px 22px rgba(0, 0, 0, 0.08);
+  --theme-section-box-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.12);
+  --theme-section-transition: border-color 0.32s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+  --section-background: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --section-background-hover: color-mix(in srgb, var(--background) 97%, var(--surface-contrast-color) 3%);
+  --section-surface: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --section-surface-hover: color-mix(in srgb, var(--background) 97%, var(--surface-contrast-color) 3%);
+
+  --theme-section-item-border: 1px solid rgba(0, 0, 0, 0.14);
+  --theme-section-item-border-hover: 1px solid rgba(0, 0, 0, 0.22);
+  --theme-section-item-background: var(--section-surface);
+  --theme-section-item-background-hover: color-mix(in srgb, var(--background) 97%, var(--surface-contrast-color) 3%);
+  --theme-section-item-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
+  --theme-section-item-box-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.12);
+  --theme-section-item-hover-transform: none;
+  --theme-section-item-transition: border-color 0.22s cubic-bezier(0.4, 0, 0.2, 1), background 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Default theme colors */
+  --foreground: #1c1c1f;
+  --muted: #f4f4f6;
+  --muted-foreground: #555861;
+  --card: color-mix(in srgb, var(--background) 99%, var(--surface-contrast-color) 1%);
+  --card-foreground: #1c1c1f;
+  --card-surface: var(--card);
+  --card-surface-hover: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --card-section-bg: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --card-section-card-bg: color-mix(in srgb, var(--card-section-bg) 90%, var(--surface-contrast-color) 10%);
+  --popover: #ffffff;
+  --popover-foreground: #1a1a1a;
+  --primary: #FF7900;
+  --primary-foreground: #ffffff;
+  --secondary: #f5f5f5;
+  --secondary-foreground: #1a1a1a;
+  --accent: #FF7900;
+  --accent-foreground: #ffffff;
+  --destructive: #d4183d;
+  --destructive-foreground: #ffffff;
+  --border: rgba(200, 200, 200, 0.5);
+  --input: transparent;
+  --input-background: #f9f9f9;
+  --switch-background: #e5e5e5;
+  --ring: rgba(255, 121, 0, 0.4);
+  --chart-1: #FF7900;
+  --chart-2: #FF9933;
+  --chart-3: #CC5F00;
+  --chart-4: #FFE6CC;
+  --chart-5: #FF4500;
+}
+
+/* Dark theme support via data attribute on container */
+.osi-cards-container[data-theme='night'],
+.osi-cards-container [data-theme='night'] {
+  --background: #0a0a0a;
+  --surface-contrast-color: #ffffff;
+  --foreground: #ffffff;
+  --muted: #242424;
+  --muted-foreground: #aaaaaa;
+  --card: color-mix(in srgb, var(--background) 99%, var(--surface-contrast-color) 1%);
+  --card-foreground: #ffffff;
+  --card-surface: var(--card);
+  --card-surface-hover: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --card-section-bg: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --card-section-card-bg: color-mix(in srgb, var(--card-section-bg) 90%, var(--surface-contrast-color) 10%);
+  --theme-ai-card-border: 0.5px solid color-mix(in srgb, var(--color-brand) 49%, transparent);
+  --theme-ai-card-border-hover: 0.5px solid var(--color-brand);
+  --theme-ai-card-background: color-mix(in srgb, var(--background) 99%, var(--surface-contrast-color) 1%);
+  --theme-ai-card-background-hover: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --theme-ai-card-box-shadow: 0 0 18px rgba(255, 121, 0, 0.3);
+  --theme-ai-card-box-shadow-hover: 0 0 24px rgba(255, 121, 0, 0.45);
+
+  --theme-card-border: 1px solid rgba(0, 0, 0, 0.16);
+  --theme-card-border-hover: var(--color-brand);
+  --theme-card-hover-border: var(--color-brand);
+  --theme-card-background: color-mix(in srgb, var(--background) 99%, var(--surface-contrast-color) 1%);
+  --theme-card-background-hover: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --theme-card-box-shadow: 0 6px 22px rgba(0, 0, 0, 0.58);
+  --theme-card-box-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.68);
+  --theme-card-box-shadow-hover-lift: 0 18px 42px rgba(0, 0, 0, 0.72);
+  --theme-card-hover-background: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --theme-card-hover-shadow: 0 20px 44px rgba(0, 0, 0, 0.76);
+  
+  --section-background: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --section-background-hover: color-mix(in srgb, var(--background) 97%, var(--surface-contrast-color) 3%);
+  --section-surface: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --section-surface-hover: color-mix(in srgb, var(--background) 97%, var(--surface-contrast-color) 3%);
+  --popover: #111111;
+  --popover-foreground: #ffffff;
+  --primary: #FF7900;
+  --primary-foreground: #ffffff;
+  --secondary: #333333;
+  --secondary-foreground: #ffffff;
+  --accent: #FF7900;
+  --accent-foreground: #000000;
+  --destructive: #d4183d;
+  --destructive-foreground: #ffffff;
+  --border: rgba(200, 200, 200, 0.3);
+  --input: transparent;
+  --input-background: #222222;
+  --switch-background: #333333;
+  --ring: rgba(255, 121, 0, 0.6);
+  --chart-1: #FF7900;
+  --chart-2: #FF9933;
+  --chart-3: #CC5F00;
+  --chart-4: #FFE6CC;
+  --chart-5: #FF4500;
+  
+  /* Dark theme specific overrides */
+  --hero-card-border: 1px solid rgba(233, 233, 233, 0.3);
+  --hero-card-border-hover: rgba(233, 233, 233, 0.6);
+  --theme-section-border: 1px solid rgba(255, 255, 255, 0.08);
+  --theme-section-border-hover: 1px solid rgba(255, 255, 255, 0.08);
+  --theme-section-box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
+  --theme-section-box-shadow-hover: 0 24px 48px rgba(0, 0, 0, 0.75);
+  --theme-section-item-border: 1px solid rgba(255, 255, 255, 0.16);
+  --theme-section-item-border-hover: 1px solid rgba(255, 255, 255, 0.28);
+  --theme-section-item-background: var(--section-surface);
+  --theme-section-item-background-hover: color-mix(in srgb, var(--background) 97%, var(--surface-contrast-color) 3%);
+  --theme-section-item-box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
+  --theme-section-item-box-shadow-hover: 0 16px 34px rgba(0, 0, 0, 0.7);
+  --theme-section-item-hover-transform: none;
+}
+
+/* Light theme support via data attribute on container */
+.osi-cards-container[data-theme='day'],
+.osi-cards-container [data-theme='day'] {
+  --background: #ffffff;
+  --foreground: #1c1c1f;
+  --muted: #f4f4f6;
+  --muted-foreground: #555861;
+  --card: color-mix(in srgb, var(--background) 99%, var(--surface-contrast-color) 1%);
+  --card-foreground: #1c1c1f;
+  --card-surface: var(--card);
+  --card-surface-hover: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --card-section-bg: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --card-section-card-bg: color-mix(in srgb, var(--card-section-bg) 88%, #ffffff);
+  --theme-ai-card-border: 0.5px solid color-mix(in srgb, var(--color-brand) 52%, transparent);
+  --theme-ai-card-border-hover: 0.5px solid var(--color-brand);
+  --theme-ai-card-background: color-mix(in srgb, var(--background) 99%, var(--surface-contrast-color) 1%);
+  --theme-ai-card-background-hover: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --theme-ai-card-box-shadow: 0 0 18px rgba(255, 121, 0, 0.3);
+  --theme-ai-card-box-shadow-hover: 0 0 24px rgba(255, 121, 0, 0.45);
+
+  --theme-card-border: 1px solid rgba(255, 255, 255, 0.22);
+  --theme-card-border-hover: var(--color-brand);
+  --theme-card-hover-border: var(--color-brand);
+  --theme-card-background: color-mix(in srgb, var(--background) 99%, var(--surface-contrast-color) 1%);
+  --theme-card-background-hover: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --theme-card-box-shadow: 0 4px 14px rgba(15, 15, 20, 0.06);
+  --theme-card-box-shadow-hover: 0 10px 24px rgba(10, 10, 16, 0.1);
+  --theme-card-box-shadow-hover-lift: 0 14px 32px rgba(6, 6, 10, 0.12);
+  --theme-card-hover-background: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --theme-card-hover-shadow: 0 14px 30px rgba(8, 8, 12, 0.12);
+  --section-background: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --section-background-hover: color-mix(in srgb, var(--background) 97%, var(--surface-contrast-color) 3%);
+  --section-surface: color-mix(in srgb, var(--background) 98%, var(--surface-contrast-color) 2%);
+  --section-surface-hover: color-mix(in srgb, var(--background) 97%, var(--surface-contrast-color) 3%);
+  --popover: #ffffff;
+  --popover-foreground: #1a1a1a;
+  --primary: #FF7900;
+  --primary-foreground: #ffffff;
+  --secondary: #f5f5f5;
+  --secondary-foreground: #1a1a1a;
+  --accent: #FF7900;
+  --accent-foreground: #ffffff;
+  --destructive: #d4183d;
+  --destructive-foreground: #ffffff;
+  --border: rgba(200, 200, 200, 0.5);
+  --input: transparent;
+  --input-background: #f9f9f9;
+  --switch-background: #e5e5e5;
+  --ring: rgba(255, 121, 0, 0.4);
+  --chart-1: #FF7900;
+  --chart-2: #FF9933;
+  --chart-3: #CC5F00;
+  --chart-4: #FFE6CC;
+  --chart-5: #FF4500;
+  
+  /* Light theme specific overrides */
+  --color-gray-700: #e0e0e0;
+  --color-gray-600: #d0d0d0;
+  --card-section-card-bg: color-mix(in srgb, var(--card-section-bg) 85%, #ffffff);
+  
+  --hero-card-border: 1px solid rgba(146, 153, 158, 0.4);
+  --hero-card-border-hover: rgba(146, 153, 158, 0.7);
+  --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 8px 22px rgba(0, 0, 0, 0.08);
+  --theme-section-box-shadow-hover: 0 18px 40px rgba(0, 0, 0, 0.12);
+  --theme-section-item-border: 1px solid rgba(0, 0, 0, 0.14);
+  --theme-section-item-border-hover: 1px solid rgba(0, 0, 0, 0.22);
+  --theme-section-item-background: var(--section-surface);
+  --theme-section-item-background-hover: color-mix(in srgb, var(--background) 97%, var(--surface-contrast-color) 3%);
+  --theme-section-item-box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
+  --theme-section-item-box-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.12);
+  --theme-section-item-hover-transform: none;
+}
+