/* BlueModus Site CSS - Theme System
   Synced from frontend/src/global.css (source of truth)
   Uses Tailwind CSS v3 CDN for utility classes
   Custom theme variables and utility classes below */

@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;500;600;700&display=swap");

/* Base theme variables (mirrors frontend @theme block) */
:root {
  --background: #fff;
  --foreground: #003652;
  --border: #0035521a;
  --ring: #28afb0;

  /* Navy color scale (brand primary) */
  --color-navy-50: #e6eef2;
  --color-navy-100: #ccdde5;
  --color-navy-200: #99bbcb;
  --color-navy-300: #6699b1;
  --color-navy-400: #337797;
  --color-navy-500: #00557d;
  --color-navy-600: #004464;
  --color-navy-700: #00527a;
  --color-navy-800: #003652;
  --color-navy-850: #1a2332;
  --color-navy-875: #1a1f35;
  --color-navy-900: #0f1629;
  --color-navy-950: #0a0f1c;

  /* Teal color scale (accent) */
  --color-teal-50: #e9f9f9;
  --color-teal-100: #d3f3f3;
  --color-teal-200: #a7e7e7;
  --color-teal-300: #7bdbdb;
  --color-teal-400: #4fcfcf;
  --color-teal-500: #28afb0;
  --color-teal-600: #208c8d;
  --color-teal-700: #18696a;
  --color-teal-800: #104647;
  --color-teal-900: #082323;

  /* Gray color scale (for light backgrounds and neutral UI) */
  --color-gray-50: #f8fafb;
  --color-gray-100: #e0e7ea;
  --color-gray-200: #c1ced5;
  --color-gray-300: #a2b5c0;
  --color-gray-400: #839cab;
  --color-gray-500: #648396;
  --color-gray-600: #506978;
  --color-gray-700: #3c4f5a;
  --color-gray-800: #28353c;
  --color-gray-900: #141a1e;

  /* Light surface used behind client logos */
  --color-logo-surface: #f9f9f9;
}

/* Light-mode logo filter */
.site-logo-light-mode {
  filter: brightness(0) saturate(100%) invert(15%) sepia(25%) saturate(1900%) hue-rotate(165deg) brightness(85%) contrast(95%);
}

/* Base styles */
* {
  border-color: var(--border);
  outline-color: var(--ring);
}

body {
  font-family: "Kumbh Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Use "body" prefix to beat Tailwind CDN Preflight resets
   (Preflight sets h1-h6 { font-size: inherit; font-weight: inherit })
   body h1 = specificity 0,0,2 > Preflight h1 = 0,0,1
   Tailwind utility classes (0,1,0) still override when present */
body h1 {
  letter-spacing: -0.02em;
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1.1;
}

body h2 {
  letter-spacing: -0.01em;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
}

body h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

body h4 {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
}

p {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
}

label,
button {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

input {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

/* Custom scale for hover effects (1.02 = 102%) */
.scale-102 {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))
    rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-102:hover {
  --tw-scale-x: 1.02;
  --tw-scale-y: 1.02;
  transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))
    rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0))
    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Background glow effect */
.bg-glow-teal {
  background: radial-gradient(ellipse at center, rgba(40, 175, 176, 0.08), transparent 70%);
}

/* Responsive viewport width for mobile horizontal scroll cards */
.w-85vw {
  width: 85vw;
}

/* White glow shadow for dark mode hover effects */
.hover\:shadow-glow-white:hover {
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
}

/* Dot pattern backgrounds for section overlays */
.bg-dot-pattern-dark {
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.12) 1.25px, transparent 0);
  background-size: 32px 32px;
}

.bg-dot-pattern-light {
  background-image: radial-gradient(circle at 1px 1px, rgba(0, 54, 82, 0.08) 1.25px, transparent 0);
  background-size: 32px 32px;
}

/* Grid pattern backgrounds for decorative overlays */
.bg-grid-pattern {
  background-image:
    linear-gradient(var(--color-grid-pattern) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-grid-pattern) 1px, transparent 1px);
  background-size: 40px 40px;
}

.opacity-theme-grid {
  opacity: var(--opacity-grid);
}

.bg-gradient-video {
  background-image: linear-gradient(to bottom right, var(--color-video-bg-from), var(--color-video-bg-to));
}

.bg-grid-pattern-dark {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}

.bg-grid-pattern-light {
  background-image:
    linear-gradient(rgba(0, 54, 82, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 54, 82, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Scrollbar hide utility */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Spotlight gradient - uses CSS variables for position and theme-aware color */
.bg-spotlight {
  background: radial-gradient(
    600px circle at var(--spotlight-x, 50%) var(--spotlight-y, 50%),
    var(--color-spotlight-gradient),
    transparent 40%
  );
}

/* Theme-aware dot pattern background */
.bg-theme-dot-pattern {
  background-image: var(--bg-dot-pattern);
  background-size: var(--bg-dot-pattern-size);
}

/* ================================================
   THEME SYSTEM - CSS Variable-Based Theming
   ================================================ */

/* Dark Theme (default) */
.theme-dark {
  /* Spotlight gradient */
  --color-spotlight-gradient: rgba(40, 175, 176, 0.15);

  /* Dot pattern */
  --bg-dot-pattern: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.12) 1.25px, transparent 0);
  --bg-dot-pattern-size: 32px 32px;

  /* Text colors */
  --color-theme-text-heading: white;
  --color-theme-text-badge: rgba(255, 255, 255, 0.9);
  --color-theme-text-body: rgba(255, 255, 255, 0.7);
  --color-theme-text-tag: rgba(255, 255, 255, 0.7);
  --color-theme-text-nav-70: rgba(255, 255, 255, 0.7);
  --color-theme-text-muted-60-70: rgba(255, 255, 255, 0.6);
  --color-theme-text-muted-60-80: rgba(255, 255, 255, 0.6);
  --color-theme-text-subtle-40-50: rgba(255, 255, 255, 0.4);
  --color-theme-text-subtle-40-40: rgba(255, 255, 255, 0.4);
  --color-theme-text-emphasis: rgba(255, 255, 255, 0.8);
  --color-theme-text-quote: rgba(255, 255, 255, 0.9);
  --color-theme-text-label-50-60: rgba(255, 255, 255, 0.5);
  --color-theme-text-accent-icon: var(--color-teal-500);
  --color-theme-text-accent-subheading: var(--color-teal-500);
  --color-theme-text-accent-reason: var(--color-teal-500);
  --color-theme-text-badge-number: var(--color-teal-500);
  --color-theme-text-quote-icon: rgba(40, 175, 176, 0.3);
  --color-theme-text-chatbot-subtitle: rgba(255, 255, 255, 0.6);
  --color-theme-text-chatbot-icon: rgba(255, 255, 255, 0.6);
  --color-theme-text-footer-copyright: rgba(255, 255, 255, 0.4);
  --color-theme-text-footer-link-hover: rgba(255, 255, 255, 0.6);
  --color-theme-text-disabled: rgba(255, 255, 255, 0.2);

  /* Background colors */
  --color-theme-bg-primary: var(--color-navy-950);
  --color-theme-bg-secondary: var(--color-navy-900);
  --color-theme-bg-indicator-40: rgba(255, 255, 255, 0.4);
  --color-theme-header-bg-scrolled: rgba(10, 15, 28, 0.8);
  --color-theme-dropdown-bg: rgba(15, 22, 41, 0.95);
  --color-theme-hover-bg-5: rgba(255, 255, 255, 0.05);
  --color-theme-hover-bg-dropdown: rgba(255, 255, 255, 0.05);
  --color-theme-toggle-bg: rgba(255, 255, 255, 0.05);
  --color-theme-toggle-bg-hover: rgba(255, 255, 255, 0.1);
  --color-theme-tag-bg: rgba(255, 255, 255, 0.05);
  --color-theme-card-bg-principle: rgba(26, 31, 53, 0.5);
  --color-theme-badge-number-bg: rgba(40, 175, 176, 0.2);
  --color-theme-badge-callout-bg: rgba(40, 175, 176, 0.2);
  --color-theme-badge-result-bg: rgba(15, 22, 41, 0.9);
  --color-theme-badge-industry-bg: rgba(40, 175, 176, 0.1);
  --color-theme-tag-bg-service: rgba(255, 255, 255, 0.05);
  --color-theme-nav-btn-bg-10: rgba(255, 255, 255, 0.1);
  --color-theme-nav-btn-bg-hover-20: rgba(255, 255, 255, 0.2);
  --color-theme-dot-inactive-bg-20: rgba(255, 255, 255, 0.2);
  --color-theme-dot-hover-bg-40: rgba(255, 255, 255, 0.4);
  --color-theme-divider-accent: var(--color-teal-500);
  --color-theme-card-elevated-bg: rgba(10, 15, 28, 0.85);
  --color-theme-card-location-bg: rgba(10, 15, 28, 0.85);
  --color-theme-form-bg: rgba(10, 15, 28, 0.95);
  --color-theme-input-bg: rgba(255, 255, 255, 0.03);
  --color-theme-input-bg-focus: rgba(255, 255, 255, 0.05);
  --color-theme-input-border: rgba(255, 255, 255, 0.1);
  --color-theme-input-text: white;
  --color-theme-input-placeholder: rgba(255, 255, 255, 0.4);
  --color-theme-form-border: rgba(255, 255, 255, 0.1);
  --color-theme-card-border: var(--color-navy-800);
  --color-theme-card-bg: rgba(255, 255, 255, 0.02);
  --color-theme-icon-contact: var(--color-teal-500);
  --color-theme-label-contact: rgba(255, 255, 255, 0.5);
  --color-theme-social-bg: rgba(255, 255, 255, 0.02);
  --color-theme-social-bg-hover: rgba(255, 255, 255, 0.05);
  --color-theme-social-border: rgba(255, 255, 255, 0.05);
  --color-theme-icon-social: rgba(255, 255, 255, 0.7);
  --color-theme-footer-border: rgba(255, 255, 255, 0.05);
  --color-theme-link: rgba(255, 255, 255, 0.6);
  --color-theme-link-hover: rgba(255, 255, 255, 0.6);
  --color-theme-contact: rgba(255, 255, 255, 0.6);
  --color-theme-copyright: rgba(255, 255, 255, 0.6);
  --color-theme-chatbot-bg: var(--color-navy-850);
  --color-theme-chatbot-header-bg: rgba(26, 35, 50, 0.95);
  --color-theme-chatbot-icon-hover-bg: rgba(255, 255, 255, 0.1);
  --color-theme-user-msg-bg: var(--color-teal-500);
  --color-theme-bot-msg-bg: var(--color-navy-900);
  --color-theme-suggestion-bg: var(--color-navy-900);
  --color-theme-suggestion-bg-hover: rgba(15, 22, 41, 0.8);
  --color-theme-chatbot-input-bg: var(--color-navy-900);
  --color-theme-chat-panel-bg: var(--color-navy-850);
  --color-theme-chat-panel-border: rgba(40, 175, 176, 0.2);
  --color-theme-chat-header-bg: rgba(26, 35, 50, 0.95);
  --color-theme-chat-header-border: rgba(40, 175, 176, 0.2);
  --color-theme-chat-icon: rgba(255, 255, 255, 0.6);
  --color-theme-chat-subtitle: rgba(255, 255, 255, 0.6);
  --color-theme-chat-user-bg: var(--color-teal-500);
  --color-theme-chat-bot-bg: var(--color-navy-900);
  --color-theme-chat-bot-border: rgba(40, 175, 176, 0.3);
  --color-theme-chat-bot-text: white;
  --color-theme-chat-timestamp: rgba(255, 255, 255, 0.4);
  --color-theme-chat-suggestion-bg: var(--color-navy-900);
  --color-theme-chat-suggestion-border: rgba(40, 175, 176, 0.2);
  --color-theme-chat-suggestion-text: rgba(255, 255, 255, 0.7);
  --color-theme-chat-suggestion-hover-bg: rgba(15, 22, 41, 0.8);
  --color-theme-chat-suggestion-hover-border: rgba(40, 175, 176, 0.4);
  --color-theme-chat-footer-bg: var(--color-navy-850);
  --color-theme-chat-footer-border: rgba(40, 175, 176, 0.3);
  --color-theme-chat-input-bg: var(--color-navy-900);
  --color-theme-chat-input-border: rgba(40, 175, 176, 0.3);
  --color-theme-chat-input-text: white;
  --color-theme-chat-input-placeholder: rgba(255, 255, 255, 0.4);
  --color-theme-chat-input-focus-bg: var(--color-navy-900);
  --color-theme-btn-send-bg: var(--color-teal-500);
  --color-theme-btn-send-bg-hover: rgba(40, 175, 176, 0.9);
  --color-theme-btn-send-shadow: rgba(40, 175, 176, 0.3);
  --color-theme-btn-send-bg-disabled: #0f1629;
  --color-theme-btn-send-text-disabled: rgba(255, 255, 255, 0.2);
  --color-theme-btn-send-border-disabled: rgba(40, 175, 176, 0.2);
  --color-theme-btn-fab-bg: var(--color-teal-500);
  --color-theme-btn-fab-bg-hover: rgba(40, 175, 176, 0.9);
  --color-theme-chat-button-bg: var(--color-teal-500);
  --color-theme-chat-button-bg-hover: rgba(40, 175, 176, 0.9);
  --color-theme-play-btn-bg: rgba(255, 255, 255, 0.9);
  --color-theme-badge-bg: rgba(255, 255, 255, 0.1);
  --color-theme-overlay: rgba(15, 22, 41, 0.5);
  --color-theme-overlay-team: rgba(15, 22, 41, 0.5);
  --color-theme-overlay-why: rgba(10, 15, 28, 0.6);
  --color-grid-pattern: rgba(255, 255, 255, 0.1);
  --opacity-grid: 0.1;
  --color-video-bg-from: rgba(40, 175, 176, 0.4);
  --color-video-bg-to: rgba(0, 82, 122, 0.6);

  /* Button colors */
  --color-theme-btn-primary-bg: white;
  --color-theme-btn-primary-text: var(--color-navy-800);
  --color-theme-btn-primary-hover-bg: white;

  /* Border colors */
  --color-theme-border-5: rgba(255, 255, 255, 0.05);
  --color-theme-border-10: rgba(255, 255, 255, 0.1);
  --color-theme-border-20: rgba(255, 255, 255, 0.2);
  --color-theme-border-accent-step: rgba(40, 175, 176, 0.4);
  --color-theme-border-card-principle: rgba(40, 175, 176, 0.2);
  --color-theme-border-badge-number: rgba(40, 175, 176, 0.4);
  --color-theme-border-callout: rgba(40, 175, 176, 0.3);
  --color-theme-border-badge-callout: rgba(40, 175, 176, 0.4);
  --color-theme-border-teal-20: rgba(40, 175, 176, 0.2);
  --color-theme-border-badge: rgba(255, 255, 255, 0.2);
  --color-theme-border-hover-accent: rgba(40, 175, 176, 0.5);
  --color-theme-border-footer: rgba(255, 255, 255, 0.05);
  --color-theme-border-social: rgba(255, 255, 255, 0.05);
  --color-theme-border-chatbot-panel: rgba(40, 175, 176, 0.2);
  --color-theme-border-bot-msg: rgba(40, 175, 176, 0.3);
  --color-theme-border-suggestion: rgba(40, 175, 176, 0.2);
  --color-theme-border-suggestion-hover: rgba(40, 175, 176, 0.4);
  --color-theme-border-chatbot-input-area: rgba(40, 175, 176, 0.3);
  --color-theme-border-focus-accent: rgba(40, 175, 176, 0.5);
  --color-theme-border-chatbot-input-focus: rgba(40, 175, 176, 0.5);
  --color-theme-border-btn-disabled: rgba(40, 175, 176, 0.2);

  /* Placeholder colors */
  --color-theme-placeholder-40: rgba(255, 255, 255, 0.4);
  --color-theme-placeholder-chatbot: rgba(255, 255, 255, 0.4);
}

/* Light Theme */
.theme-light {
  /* Spotlight gradient */
  --color-spotlight-gradient: rgba(40, 175, 176, 0.08);

  /* Dot pattern */
  --bg-dot-pattern: radial-gradient(circle at 1px 1px, rgba(0, 54, 82, 0.08) 1.25px, transparent 0);
  --bg-dot-pattern-size: 32px 32px;

  /* Text colors */
  --color-theme-text-heading: var(--color-navy-800);
  --color-theme-text-badge: var(--color-navy-800);
  --color-theme-text-body: rgba(0, 82, 122, 0.8);
  --color-theme-text-tag: rgba(0, 82, 122, 0.8);
  --color-theme-text-nav-70: rgba(0, 54, 82, 0.7);
  --color-theme-text-muted-60-70: rgba(0, 82, 122, 0.7);
  --color-theme-text-muted-60-80: rgba(0, 82, 122, 0.8);
  --color-theme-text-subtle-40-50: rgba(0, 82, 122, 0.5);
  --color-theme-text-subtle-40-40: rgba(0, 54, 82, 0.4);
  --color-theme-text-emphasis: rgba(0, 54, 82, 0.9);
  --color-theme-text-quote: var(--color-navy-800);
  --color-theme-text-label-50-60: rgba(0, 82, 122, 0.6);
  --color-theme-text-accent-icon: var(--color-navy-700);
  --color-theme-text-accent-subheading: var(--color-navy-700);
  --color-theme-text-accent-reason: var(--color-navy-700);
  --color-theme-text-badge-number: var(--color-navy-700);
  --color-theme-text-quote-icon: rgba(40, 175, 176, 0.4);
  --color-theme-text-chatbot-subtitle: rgba(0, 82, 122, 0.6);
  --color-theme-text-chatbot-icon: rgba(0, 54, 82, 0.6);
  --color-theme-text-footer-copyright: rgba(0, 82, 122, 0.6);
  --color-theme-text-footer-link-hover: rgba(0, 82, 122, 0.8);
  --color-theme-text-disabled: rgba(0, 54, 82, 0.2);

  /* Background colors */
  --color-theme-bg-primary: white;
  --color-theme-bg-secondary: var(--color-gray-100);
  --color-theme-bg-indicator-40: rgba(0, 54, 82, 0.4);
  --color-theme-header-bg-scrolled: rgba(255, 255, 255, 0.8);
  --color-theme-dropdown-bg: rgba(255, 255, 255, 0.95);
  --color-theme-hover-bg-5: rgba(0, 54, 82, 0.05);
  --color-theme-hover-bg-dropdown: rgba(248, 250, 251, 0.5);
  --color-theme-toggle-bg: #e0e7ea;
  --color-theme-toggle-bg-hover: rgba(224, 231, 234, 0.7);
  --color-theme-tag-bg: rgba(224, 231, 234, 0.5);
  --color-theme-card-bg-principle: white;
  --color-theme-badge-number-bg: rgba(40, 175, 176, 0.1);
  --color-theme-badge-callout-bg: white;
  --color-theme-badge-result-bg: rgba(255, 255, 255, 0.9);
  --color-theme-badge-industry-bg: rgba(40, 175, 176, 0.05);
  --color-theme-tag-bg-service: white;
  --color-theme-nav-btn-bg-10: rgba(0, 54, 82, 0.1);
  --color-theme-nav-btn-bg-hover-20: rgba(0, 54, 82, 0.2);
  --color-theme-dot-inactive-bg-20: rgba(0, 54, 82, 0.2);
  --color-theme-dot-hover-bg-40: rgba(0, 54, 82, 0.4);
  --color-theme-divider-accent: var(--color-navy-700);
  --color-theme-card-elevated-bg: white;
  --color-theme-card-location-bg: rgba(248, 250, 251, 0.3);
  --color-theme-form-bg: white;
  --color-theme-input-bg: var(--color-gray-50);
  --color-theme-input-bg-focus: white;
  --color-theme-input-border: rgba(0, 54, 82, 0.2);
  --color-theme-input-text: var(--color-navy-800);
  --color-theme-input-placeholder: rgba(0, 82, 122, 0.4);
  --color-theme-form-border: rgba(0, 54, 82, 0.1);
  --color-theme-card-border: rgba(0, 54, 82, 0.1);
  --color-theme-card-bg: white;
  --color-theme-icon-contact: var(--color-navy-700);
  --color-theme-label-contact: rgba(0, 82, 122, 0.6);
  --color-theme-social-bg: rgba(0, 54, 82, 0.05);
  --color-theme-social-bg-hover: rgba(0, 54, 82, 0.1);
  --color-theme-social-border: rgba(0, 54, 82, 0.2);
  --color-theme-icon-social: rgba(0, 82, 122, 0.7);
  --color-theme-footer-border: rgba(0, 54, 82, 0.1);
  --color-theme-link: rgba(0, 82, 122, 0.7);
  --color-theme-link-hover: rgba(0, 82, 122, 0.8);
  --color-theme-contact: rgba(0, 82, 122, 0.7);
  --color-theme-copyright: rgba(0, 82, 122, 0.6);
  --color-theme-chatbot-bg: var(--color-gray-50);
  --color-theme-chatbot-header-bg: rgba(248, 250, 251, 0.95);
  --color-theme-chatbot-icon-hover-bg: rgba(0, 54, 82, 0.05);
  --color-theme-user-msg-bg: var(--color-navy-800);
  --color-theme-bot-msg-bg: white;
  --color-theme-suggestion-bg: white;
  --color-theme-suggestion-bg-hover: rgba(255, 255, 255, 0.8);
  --color-theme-chatbot-input-bg: var(--color-gray-50);
  --color-theme-chat-panel-bg: var(--color-gray-50);
  --color-theme-chat-panel-border: rgba(0, 54, 82, 0.1);
  --color-theme-chat-header-bg: rgba(248, 250, 251, 0.95);
  --color-theme-chat-header-border: rgba(0, 54, 82, 0.1);
  --color-theme-chat-icon: rgba(0, 54, 82, 0.6);
  --color-theme-chat-subtitle: rgba(0, 82, 122, 0.6);
  --color-theme-chat-user-bg: var(--color-navy-800);
  --color-theme-chat-bot-bg: white;
  --color-theme-chat-bot-border: rgba(0, 54, 82, 0.1);
  --color-theme-chat-bot-text: var(--color-navy-800);
  --color-theme-chat-timestamp: rgba(0, 54, 82, 0.4);
  --color-theme-chat-suggestion-bg: white;
  --color-theme-chat-suggestion-border: rgba(0, 54, 82, 0.1);
  --color-theme-chat-suggestion-text: rgba(0, 54, 82, 0.7);
  --color-theme-chat-suggestion-hover-bg: rgba(255, 255, 255, 0.8);
  --color-theme-chat-suggestion-hover-border: rgba(0, 54, 82, 0.2);
  --color-theme-chat-footer-bg: white;
  --color-theme-chat-footer-border: rgba(0, 54, 82, 0.2);
  --color-theme-chat-input-bg: var(--color-gray-50);
  --color-theme-chat-input-border: rgba(0, 54, 82, 0.2);
  --color-theme-chat-input-text: var(--color-navy-800);
  --color-theme-chat-input-placeholder: rgba(0, 82, 122, 0.4);
  --color-theme-chat-input-focus-bg: var(--color-gray-50);
  --color-theme-btn-send-bg: var(--color-navy-800);
  --color-theme-btn-send-bg-hover: var(--color-navy-700);
  --color-theme-btn-send-shadow: rgba(0, 0, 0, 0.1);
  --color-theme-btn-send-bg-disabled: #e0e7ea;
  --color-theme-btn-send-text-disabled: rgba(0, 54, 82, 0.2);
  --color-theme-btn-send-border-disabled: transparent;
  --color-theme-btn-fab-bg: var(--color-navy-800);
  --color-theme-btn-fab-bg-hover: var(--color-navy-700);
  --color-theme-chat-button-bg: #003652;
  --color-theme-chat-button-bg-hover: #00527a;
  --color-theme-play-btn-bg: var(--color-navy-800);
  --color-theme-badge-bg: rgba(255, 255, 255, 0.9);
  --color-theme-overlay: rgba(0, 54, 82, 0.3);
  --color-theme-overlay-team: rgba(0, 54, 82, 0.2);
  --color-theme-overlay-why: rgba(0, 54, 82, 0.3);
  --color-grid-pattern: rgba(0, 54, 82, 0.1);
  --opacity-grid: 0.05;
  --color-video-bg-from: rgba(40, 175, 176, 0.3);
  --color-video-bg-to: rgba(0, 82, 122, 0.4);

  /* Button colors */
  --color-theme-btn-primary-bg: var(--color-navy-800);
  --color-theme-btn-primary-text: white;
  --color-theme-btn-primary-hover-bg: var(--color-navy-700);

  /* Border colors */
  --color-theme-border-5: rgba(0, 54, 82, 0.05);
  --color-theme-border-10: rgba(0, 54, 82, 0.1);
  --color-theme-border-20: rgba(0, 54, 82, 0.2);
  --color-theme-border-accent-step: rgba(40, 175, 176, 0.3);
  --color-theme-border-card-principle: rgba(0, 54, 82, 0.1);
  --color-theme-border-badge-number: rgba(40, 175, 176, 0.3);
  --color-theme-border-callout: rgba(40, 175, 176, 0.2);
  --color-theme-border-badge-callout: rgba(40, 175, 176, 0.3);
  --color-theme-border-teal-20: rgba(40, 175, 176, 0.2);
  --color-theme-border-badge: rgba(0, 54, 82, 0.1);
  --color-theme-border-hover-accent: var(--color-teal-500);
  --color-theme-border-footer: rgba(0, 54, 82, 0.1);
  --color-theme-border-social: rgba(0, 54, 82, 0.2);
  --color-theme-border-chatbot-panel: rgba(0, 54, 82, 0.1);
  --color-theme-border-bot-msg: rgba(0, 54, 82, 0.1);
  --color-theme-border-suggestion: rgba(0, 54, 82, 0.1);
  --color-theme-border-suggestion-hover: rgba(0, 54, 82, 0.2);
  --color-theme-border-chatbot-input-area: rgba(0, 54, 82, 0.2);
  --color-theme-border-focus-accent: var(--color-teal-500);
  --color-theme-border-chatbot-input-focus: rgba(0, 54, 82, 0.3);
  --color-theme-border-btn-disabled: transparent;

  /* Placeholder colors */
  --color-theme-placeholder-40: rgba(0, 82, 122, 0.4);
  --color-theme-placeholder-chatbot: rgba(0, 54, 82, 0.4);
}

/* ================================================
   SEMANTIC UTILITY CLASSES
   ================================================ */

/* Text colors */
.text-theme-heading { color: var(--color-theme-text-heading); }
.text-theme-badge { color: var(--color-theme-text-badge); }
.text-theme-body { color: var(--color-theme-text-body); }
.text-theme-tag { color: var(--color-theme-text-tag); }
.text-theme-nav-70 { color: var(--color-theme-text-nav-70); }
.text-theme-muted-60-70 { color: var(--color-theme-text-muted-60-70); }
.text-theme-muted-60-80 { color: var(--color-theme-text-muted-60-80); }
.text-theme-subtle-40-50 { color: var(--color-theme-text-subtle-40-50); }
.text-theme-subtle-40-40 { color: var(--color-theme-text-subtle-40-40); }
.text-theme-emphasis { color: var(--color-theme-text-emphasis); }
.text-theme-quote { color: var(--color-theme-text-quote); }
.text-theme-label-50-60 { color: var(--color-theme-text-label-50-60); }
.text-theme-accent-icon { color: var(--color-theme-text-accent-icon); }
.text-theme-accent-reason { color: var(--color-theme-text-accent-reason); }
.text-theme-accent-subheading { color: var(--color-theme-text-accent-subheading); }
.text-theme-badge-number { color: var(--color-theme-text-badge-number); }
.text-theme-quote-icon { color: var(--color-theme-text-quote-icon); }
.text-theme-chatbot-subtitle { color: var(--color-theme-text-chatbot-subtitle); }
.text-theme-chatbot-icon { color: var(--color-theme-text-chatbot-icon); }
.text-theme-footer-copyright { color: var(--color-theme-text-footer-copyright); }
.text-theme-disabled { color: var(--color-theme-text-disabled); }
.hover\:text-theme-heading:hover { color: var(--color-theme-text-heading); }
.hover\:text-theme-nav-70:hover { color: var(--color-theme-text-nav-70); }
.hover\:text-theme-footer-link-hover:hover { color: var(--color-theme-text-footer-link-hover); }

/* Button text colors */
.text-theme-btn-primary-text { color: var(--color-theme-btn-primary-text); }
.text-theme-play-btn-text { color: var(--color-theme-btn-primary-text); } /* inverted */

/* Background colors */
.bg-theme-primary { background-color: var(--color-theme-bg-primary); }
.bg-theme-secondary { background-color: var(--color-theme-bg-secondary); }
.bg-theme-indicator-40 { background-color: var(--color-theme-bg-indicator-40); }
.bg-theme-header-scrolled { background-color: var(--color-theme-header-bg-scrolled); }
.bg-theme-dropdown { background-color: var(--color-theme-dropdown-bg); }
.bg-theme-tag { background-color: var(--color-theme-tag-bg); }
.bg-theme-card-principle { background-color: var(--color-theme-card-bg-principle); }
.bg-theme-badge-number { background-color: var(--color-theme-badge-number-bg); }
.bg-theme-badge-callout { background-color: var(--color-theme-badge-callout-bg); }
.bg-theme-badge-result { background-color: var(--color-theme-badge-result-bg); }
.bg-theme-badge-industry { background-color: var(--color-theme-badge-industry-bg); }
.bg-theme-tag-service { background-color: var(--color-theme-tag-bg-service); }
.bg-theme-nav-btn-10 { background-color: var(--color-theme-nav-btn-bg-10); }
.bg-theme-nav-btn { background-color: var(--color-theme-nav-btn-bg-10); }
.bg-theme-dot-inactive-20 { background-color: var(--color-theme-dot-inactive-bg-20); }
.bg-theme-indicator-20 { background-color: var(--color-theme-dot-inactive-bg-20); }
.bg-theme-divider-accent { background-color: var(--color-theme-divider-accent); }
.bg-theme-card-elevated { background-color: var(--color-theme-card-elevated-bg); }
.bg-theme-card-location { background-color: var(--color-theme-card-location-bg); }
.bg-theme-form { background-color: var(--color-theme-form-bg); }
.bg-theme-input { background-color: var(--color-theme-input-bg); }
.border-theme-input { border-color: var(--color-theme-input-border); }
.text-theme-input-text { color: var(--color-theme-input-text); }
.placeholder-theme-input-placeholder::placeholder { color: var(--color-theme-input-placeholder); }
.border-theme-form { border-color: var(--color-theme-form-border); }
.border-theme-card { border-color: var(--color-theme-card-border); }
.bg-theme-card { background-color: var(--color-theme-card-bg); }
.bg-theme-overlay { background-color: var(--color-theme-overlay); }
.text-theme-icon-contact { color: var(--color-theme-icon-contact); }
.text-theme-label { color: var(--color-theme-label-contact); }

/* Chat/Chatbot utilities */
.bg-theme-chat-panel { background-color: var(--color-theme-chat-panel-bg); }
.border-theme-chat-panel { border-color: var(--color-theme-chat-panel-border); }
.bg-theme-chat-header { background-color: var(--color-theme-chat-header-bg); }
.border-theme-chat-header { border-color: var(--color-theme-chat-header-border); }
.text-theme-chat-icon { color: var(--color-theme-chat-icon); }
.text-theme-chat-subtitle { color: var(--color-theme-chat-subtitle); }
.bg-theme-chat-user { background-color: var(--color-theme-chat-user-bg); }
.bg-theme-chat-bot { background-color: var(--color-theme-chat-bot-bg); }
.border-theme-chat-bot { border-color: var(--color-theme-chat-bot-border); }
.text-theme-chat-bot-text { color: var(--color-theme-chat-bot-text); }
.text-theme-chat-timestamp { color: var(--color-theme-chat-timestamp); }
.bg-theme-chat-suggestion { background-color: var(--color-theme-chat-suggestion-bg); }
.border-theme-chat-suggestion { border-color: var(--color-theme-chat-suggestion-border); }
.text-theme-chat-suggestion-text { color: var(--color-theme-chat-suggestion-text); }
.hover\:bg-theme-chat-suggestion-hover:hover { background-color: var(--color-theme-chat-suggestion-hover-bg); }
.hover\:border-theme-chat-suggestion-hover:hover { border-color: var(--color-theme-chat-suggestion-hover-border); }
.bg-theme-chat-footer { background-color: var(--color-theme-chat-footer-bg); }
.border-theme-chat-footer { border-color: var(--color-theme-chat-footer-border); }
.bg-theme-chat-input { background-color: var(--color-theme-chat-input-bg); }
.bg-theme-btn-send { background-color: var(--color-theme-btn-send-bg); }
.hover\:bg-theme-btn-send-hover:hover { background-color: var(--color-theme-btn-send-bg-hover); }
.shadow-theme-btn-send {
  box-shadow:
    0 10px 15px -3px var(--color-theme-btn-send-shadow),
    0 4px 6px -4px var(--color-theme-btn-send-shadow);
}
.bg-theme-btn-send-disabled { background-color: var(--color-theme-btn-send-bg-disabled); }
.text-theme-btn-send-disabled { color: var(--color-theme-btn-send-text-disabled); }
.border-theme-btn-send-disabled { border-color: var(--color-theme-btn-send-border-disabled); }
.border-theme-chat-input { border-color: var(--color-theme-chat-input-border); }
.text-theme-chat-input-text { color: var(--color-theme-chat-input-text); }
.placeholder-theme-chat-input-placeholder::placeholder { color: var(--color-theme-chat-input-placeholder); }
.bg-theme-chat-send { background-color: var(--color-theme-chat-send-bg); }
.hover\:bg-theme-chat-send-hover:hover { background-color: var(--color-theme-chat-send-hover); }
.shadow-theme-chat-send {
  box-shadow:
    0 10px 15px -3px var(--color-theme-chat-send-shadow),
    0 4px 6px -4px var(--color-theme-chat-send-shadow);
}
.bg-theme-chat-send-disabled-bg { background-color: var(--color-theme-chat-send-disabled-bg); }
.text-theme-chat-send-disabled-text { color: var(--color-theme-chat-send-disabled-text); }
.border-theme-chat-send-disabled { border-color: var(--color-theme-chat-send-disabled-border); }
.focus\:bg-theme-chat-input-focus:focus { background-color: var(--color-theme-chat-input-focus-bg); }
.hover\:bg-theme-chat-icon-hover:hover { background-color: var(--color-theme-chatbot-icon-hover-bg); }

.bg-theme-social { background-color: var(--color-theme-social-bg); }
.border-theme-social-border { border-color: var(--color-theme-social-border); }
.text-theme-icon-social { color: var(--color-theme-icon-social); }
.border-theme-footer { border-color: var(--color-theme-footer-border); }
.text-theme-link { color: var(--color-theme-link); }
.hover\:text-theme-link-hover:hover { color: var(--color-theme-link-hover); }
.text-theme-contact { color: var(--color-theme-contact); }
.text-theme-copyright { color: var(--color-theme-copyright); }
.bg-theme-chatbot { background-color: var(--color-theme-chatbot-bg); }
.bg-theme-chatbot-header { background-color: var(--color-theme-chatbot-header-bg); }
.bg-theme-user-msg { background-color: var(--color-theme-user-msg-bg); }
.bg-theme-bot-msg { background-color: var(--color-theme-bot-msg-bg); }
.bg-theme-suggestion { background-color: var(--color-theme-suggestion-bg); }
.bg-theme-chatbot-input { background-color: var(--color-theme-chatbot-input-bg); }
.bg-theme-btn-fab { background-color: var(--color-theme-btn-fab-bg); }
.bg-theme-play-btn { background-color: var(--color-theme-play-btn-bg); }
.bg-theme-badge { background-color: var(--color-theme-badge-bg); }
.bg-theme-chat-button { background-color: var(--color-theme-chat-button-bg); }
.bg-gradient-overlay {
  background-image: linear-gradient(to top right, var(--color-theme-overlay), transparent);
}
.bg-gradient-overlay-team {
  background-image: linear-gradient(to top right, var(--color-theme-overlay-team), transparent);
}
.bg-gradient-overlay-why {
  background-image: linear-gradient(to top right, var(--color-theme-overlay-why), transparent);
}
.bg-theme-toggle { background-color: var(--color-theme-toggle-bg); }

/* Button backgrounds */
.bg-theme-btn-primary { background-color: var(--color-theme-btn-primary-bg); }
.hover\:bg-theme-btn-primary-hover:hover { background-color: var(--color-theme-btn-primary-hover-bg); }

/* Button hover effects - dark mode shadow */
.theme-dark .shadow-theme-btn-hover:hover {
  box-shadow: 0 25px 50px -12px rgba(255, 255, 255, 0.2) !important;
}

/* Hover backgrounds */
.hover\:bg-theme-hover-5:hover { background-color: var(--color-theme-hover-bg-5); }
.hover\:bg-theme-hover-dropdown:hover { background-color: var(--color-theme-hover-bg-dropdown); }
.hover\:bg-theme-toggle-hover:hover { background-color: var(--color-theme-toggle-bg-hover); }
.hover\:bg-theme-nav-btn-hover-20:hover { background-color: var(--color-theme-nav-btn-bg-hover-20); }
.hover\:bg-theme-nav-btn-hover:hover { background-color: var(--color-theme-nav-btn-bg-hover-20); }
.hover\:bg-theme-dot-hover-40:hover { background-color: var(--color-theme-dot-hover-bg-40); }
.hover\:bg-theme-indicator-40:hover { background-color: var(--color-theme-dot-hover-bg-40); }
.hover\:bg-theme-social-hover:hover { background-color: var(--color-theme-social-bg-hover); }
.hover\:bg-theme-chatbot-icon-hover:hover { background-color: var(--color-theme-chatbot-icon-hover-bg); }
.hover\:bg-theme-chat-button-hover:hover { background-color: var(--color-theme-chat-button-bg-hover); }
.hover\:bg-theme-suggestion-hover:hover { background-color: var(--color-theme-suggestion-bg-hover); }
.hover\:bg-theme-btn-send-hover:hover { background-color: var(--color-theme-btn-send-bg-hover); }
.hover\:bg-theme-btn-fab-hover:hover { background-color: var(--color-theme-btn-fab-bg-hover); }

/* Focus backgrounds */
.focus\:bg-theme-input-focus:focus { background-color: var(--color-theme-input-bg-focus); }
.focus\:bg-theme-chatbot-input:focus { background-color: var(--color-theme-chatbot-input-bg); }

/* Border colors */
.border-theme-5 { border-color: var(--color-theme-border-5); }
.border-theme-10 { border-color: var(--color-theme-border-10); }
.border-theme-20 { border-color: var(--color-theme-border-20); }
.border-theme-accent-step { border-color: var(--color-theme-border-accent-step); }
.border-theme-card-principle { border-color: var(--color-theme-border-card-principle); }
.border-theme-badge-number { border-color: var(--color-theme-border-badge-number); }
.border-theme-callout { border-color: var(--color-theme-border-callout); }
.border-theme-badge-callout { border-color: var(--color-theme-border-badge-callout); }
.border-theme-teal-20 { border-color: var(--color-theme-border-teal-20); }
.border-theme-badge { border-color: var(--color-theme-border-badge); }
.border-theme-footer { border-color: var(--color-theme-border-footer); }
.border-theme-social { border-color: var(--color-theme-border-social); }
.border-theme-chatbot-panel { border-color: var(--color-theme-border-chatbot-panel); }
.border-theme-bot-msg { border-color: var(--color-theme-border-bot-msg); }
.border-theme-suggestion { border-color: var(--color-theme-border-suggestion); }
.border-theme-chatbot-input-area { border-color: var(--color-theme-border-chatbot-input-area); }
.border-theme-btn-disabled { border-color: var(--color-theme-border-btn-disabled); }

/* Hover borders */
.hover\:border-theme-accent-hover:hover { border-color: var(--color-theme-border-hover-accent); }
.hover\:border-theme-suggestion-hover:hover { border-color: var(--color-theme-border-suggestion-hover); }

/* Focus borders */
.focus\:border-theme-focus-accent:focus { border-color: var(--color-theme-border-focus-accent); }
.focus\:border-theme-chatbot-input-focus:focus { border-color: var(--color-theme-border-chatbot-input-focus); }

/* Placeholder colors */
.placeholder-theme-placeholder-40::placeholder { color: var(--color-theme-placeholder-40); }
.placeholder-theme-chatbot::placeholder { color: var(--color-theme-placeholder-chatbot); }

/* Animated underline (link hover effect) */
.link-underline-teal {
  position: relative;
  text-decoration: none;
}

.link-underline-teal::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15em;
  height: 2px;
  width: 100%;
  background: linear-gradient(to right, var(--color-teal-500), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.group:hover .link-underline-teal::after,
.link-underline-teal:hover::after {
  transform: scaleX(1);
}

/* Convenience color utilities (supplement Tailwind CDN) */
.text-teal-500 { color: #28afb0; }
.bg-teal-500 { background-color: #28afb0; }
.border-teal-500 { border-color: #28afb0; }
.border-teal-500\/20 { border-color: rgba(40, 175, 176, 0.2); }
.bg-teal-500\/10 { background-color: rgba(40, 175, 176, 0.1); }
.hover\:border-teal-500:hover { border-color: #28afb0; }

/* Gradient utilities */
.from-navy-800 { --tw-gradient-from: #003652; }
.to-navy-700 { --tw-gradient-to: #00527a; }
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to));
}

/* Animation utilities */
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

/* Custom height/width utilities */
.h-100 { height: 400px; }
.min-w-\[200px\] { min-width: 200px; }