osi-cards-lib 1.0.0

package/styles/core/_variables.scss

@@ -0,0 +1,462 @@
+/* Import theme colors first - this defines :root with theme system */
+@import 'variables/colors';
+
+/* Additional design tokens that extend the theme system */
+:root,
+:root[data-theme='night'],
+:root[data-theme='day'] {
+  /* ===== 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 ===== */
+  /* All cards (metric, contact, list, etc.) use this consistent base */
+  /* Enhanced design: better padding, visible borders, depth shadows */
+  
+  /* STANDARDIZED CARD VARIABLES - BALANCED DESIGN */
+  /* OPTIMIZED: Moderate padding for clean, professional look */
+  --card-main-padding: 16px; /* Main card container padding - balanced */
+  --card-padding-vertical: 12px; /* Balanced vertical rhythm */
+  --card-padding-horizontal: 16px; /* Balanced horizontal spacing */
+  --card-padding: 16px; /* Constant padding for sections and internal cards */
+  --card-padding-large: 20px; /* Larger padding for emphasis */
+  --section-padding: 16px; /* Fixed padding for all section internals */
+  --card-min-height: auto; /* COMPACT: No minimum height - cards fit content */
+  --card-gap: clamp(6px, 0.6vw, 10px); /* BALANCED: Internal element gap */
+  --card-gap-large: clamp(10px, 0.8vw, 14px); /* BALANCED: Larger gap */
+  
+  /* Nested Element Spacing - UNIFIED (no calc() needed) */
+  --card-nested-gap: clamp(3px, 0.4vw, 6px); /* Same as card-gap for consistency */
+  --section-header-gap: clamp(3px, 0.4vw, 6px); /* Same as card-gap for consistency */
+  --section-header-padding-bottom: clamp(3px, 0.4vw, 6px); /* Same as card-gap for consistency */
+  
+  /* Card Backgrounds default to AI-card skin but remain theme overridable */
+  --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 ===== */
+  /* Global parameters for border, background, hover effect for each element type */
+  
+  /* 1. HERO CARDS (.hero-feature-card) */
+  --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 (buttons, radio buttons, etc.) */
+  --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; /* No transform for cards */
+  --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) - DISCRETE BORDERS */
+  --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 backgrounds defined in colors file for theme switching */
+  --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; /* No transform for sections */
+  --section-transition: var(--theme-section-transition, none);
+  
+  /* 5. SECTION ITEMS (.section-card, .chart-card, etc.) - DISCRETE BORDERS */
+  --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); /* No transform for section items */
+  --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 now map to dedicated theme tokens */
+  --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 - unified */
+  --card-border-radius: 12px; /* MODERN: Standard radius - matches reference design */
+  --card-border-radius-large: 16px; /* MODERN: Larger radius - increased for prominence */
+  --section-card-gap: 12px; /* Gap between cards in section grids - increased spacing */
+  --section-card-border-radius: 10px; /* Radius for cards within sections (unified) */
+  --section-grid-min-width: 200px; /* SPACIOUS: Minimum column width - restored for better layout */
+  
+  /* Card Hover State Aliases (for mixin compatibility) */
+  --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 - deprecated */
+  --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 ===== */
+  /* Consistent font sizing across ALL card types and sections */
+  /* Enhanced with strategic emphasis and visual hierarchy */
+  
+  /* Section Titles (e.g., "Key Contacts", "Company Overview") - PREMIUM */
+  --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 Titles (individual cards within sections) - PROMINENT */
+  --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 Subtitles/Roles - REFINED */
+  --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 Labels (e.g., "INDUSTRY", "FOUNDED") - CRISP & BOLD */
+  --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 Values - EMPHASIZED */
+  --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/Description Text - SUBTLE */
+  --card-meta-font-size: clamp(0.68rem, 0.6rem + 0.16vw, 0.84rem);
+  --card-meta-font-weight: 500;
+  --card-meta-line-height: 1.3;
+  
+  /* Smallest text size - for compact lists and features */
+  --card-text-small-font-size: clamp(0.48rem, 0.42rem + 0.13vw, 0.58rem);
+  
+  /* Card Colors - Standardized text colors (theme-aware, set in theme files) */
+  --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);        /* Standard transition */
+  --card-transition-fast: all 0.22s ease;                            /* Fast transition */
+
+  /* Layered surface 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;
+  
+  /* Removed mobile overrides - all sizing is now continuous via clamp() */
+  
+  /* ===== LEGACY FONT ALIASES (for backward compatibility) ===== */
+  /* These map old variable names to the unified typography system */
+  --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 ===== */
+  /* All spacing MUST use these variables - NO hardcoded values allowed */
+  
+  /* Item-Level Spacing (inside cards/sections) */
+    --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 - Standardized for all section grids */
+  --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;
+  
+  /* Unified Section Grid Gap - LEGACY - Use --section-card-gap instead */
+    --section-grid-gap: 8px; /* Aliased to --section-card-gap for backward compatibility */
+    --section-grid-gap-mobile: 9px;
+    --section-stack-gap: 12px;
+    --section-stack-gap-mobile: 9px;
+  
+  /* Grid Gaps Mobile */
+  --grid-gap-xs-mobile: 4px;
+  --grid-gap-sm-mobile: 4px;
+  --grid-gap-md-mobile: 4px;
+  
+  /* Section Item Padding (for items INSIDE sections) */
+  --section-item-padding: 8px;
+  --section-item-padding-mobile: 6px;
+  --section-item-gap: 6px;
+  --section-item-gap-mobile: 4px;
+  
+  /* Metric Card Padding (analytics, overview, info cards) */
+  --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 - Standardized */
+  --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 ===== */
+  /* Animation Durations - Standardized timing scale */
+  --duration-instant: 40ms;
+  --duration-fast: 80ms;
+  --duration-normal: 160ms;
+  --duration-moderate: 220ms;
+  --duration-slow: 300ms;
+  --duration-slower: 380ms;
+  --duration-slowest: 460ms;
+
+  /* Motion Distances & Scale - keeps animations consistent while lightweight */
+  --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 - Natural motion curves */
+  --ease-out-smooth: cubic-bezier(0.23, 1, 0.32, 1);       /* Smooth deceleration */
+  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);      /* Balanced acceleration */
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);        /* Spring-like bounce */
+  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);   /* Pronounced bounce */
+  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);         /* Exponential slowdown */
+  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); /* Quadratic ease */
+
+  /* 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 - For staggered effects */
+  --stagger-delay-base: 25ms;
+  --stagger-delay-fast: 15ms;
+  --stagger-delay-slow: 45ms;
+
+  /* Performance Hints */
+  --animation-fill-mode: both;
+  --animation-play-state: running;
+
+  /* Legacy variables - kept for backward compatibility */
+  --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;
+}
+
+/* ===== RESPONSIVE ANIMATION PREFERENCES ===== */
+/* Reduced motion support for accessibility */
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  :root[data-theme='night'],
+  :root[data-theme='day'] {
+    /* Drastically reduce animation durations */
+    --duration-instant: 1ms;
+    --duration-fast: 1ms;
+    --duration-normal: 1ms;
+    --duration-moderate: 1ms;
+    --duration-slow: 1ms;
+    --duration-slower: 1ms;
+    --duration-slowest: 1ms;
+    
+    /* Disable tilt animations */
+    --tilt-duration: 1ms;
+    --tilt-reset-duration: 1ms;
+    --shadow-duration: 1ms;
+    --glow-duration: 1ms;
+    --reflection-duration: 1ms;
+    
+    /* Minimal card interactions */
+    --card-hover-duration: 1ms;
+    
+    /* No stagger delays */
+    --stagger-delay-base: 0ms;
+    --stagger-delay-fast: 0ms;
+    --stagger-delay-slow: 0ms;
+
+    /* Disable layer entrance animations */
+    --ai-card-entrance-animation: none;
+    --section-entrance-animation: none;
+    --section-item-entrance-animation: none;
+  }
+  
+  *,
+  *::before,
+  *::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Animations are now consistent across all viewport sizes - controlled by prefers-reduced-motion only */

package/styles/core/variables/_colors.scss

@@ -0,0 +1,212 @@
+:root {
+  /* === 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 (override per theme via data-theme) */
+  --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); /* Orange glow only, intensified by 50% */
+  --theme-ai-card-box-shadow-hover: 0 0 24px rgba(255, 121, 0, 0.45); /* Orange glow only, intensified by 50% */
+  --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);
+}
+
+/* === DARK THEME (Night Mode - React Design) === */
+:root[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); /* Orange glow only, intensified by 50% */
+  --theme-ai-card-box-shadow-hover: 0 0 24px rgba(255, 121, 0, 0.45); /* Orange glow only, intensified by 50% */
+
+  --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);
+  /* Sections lift off the darker card */
+  --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;
+  
+  /* Theme-specific overrides for 5 element types - Dark theme */
+  --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 (Day Mode - Inverted React Design) === */
+:root[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); /* Orange glow only, intensified by 50% */
+  --theme-ai-card-box-shadow-hover: 0 0 24px rgba(255, 121, 0, 0.45); /* Orange glow only, intensified by 50% */
+
+  --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 for sections */
+  --color-gray-700: #e0e0e0;
+  --color-gray-600: #d0d0d0;
+  --card-section-card-bg: color-mix(in srgb, var(--card-section-bg) 85%, #ffffff);
+  
+  /* Theme-specific overrides for 5 element types - Light theme */
+  --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;
+}
+