/**
 * ============================================
 * Capellaris - Design System Styles
 * Based on DSCamargo Design System v1.0
 * ============================================
 * 
 * CONTRAST GUIDELINES (WCAG 2.1 AA):
 * - Normal text: minimum 4.5:1 ratio
 * - Large text (18pt+ or 14pt bold): minimum 3:1 ratio
 * 
 * SAFE COMBINATIONS:
 * - Dark backgrounds (--primary-800, --gray-800, --gray-900): use --white or --gray-100
 * - Light backgrounds (--white, --gray-100, --gray-200): use --gray-800 or --gray-900
 * - Gradient backgrounds: ensure text color works with darkest part
 * 
 * AVOID:
 * - White text on light backgrounds
 * - Dark text on dark backgrounds
 * - Low opacity text on any background
 * ============================================
 */

/* Import shared design system variables */
@import url('../../design-system/variables.css');

:root {
  /* Colors - Primary Blue */
  --primary-900: #1a3a52;
  --primary-800: #283E51;
  --primary-700: #3a5a73;
  --primary-600: #4B79A1;
  --primary-500: #5d8bb3;
  --primary-400: #7fa3c4;
  --primary-300: #a1bbd5;
  --primary-200: #c3d3e6;
  --primary-100: #e5ebf2;
  --primary-50: #f0f4f8;

  /* Colors - Innovation Cyan */
  --cyan-700: #0e7490;
  --cyan-600: #0891b2;
  --cyan-500: #06b6d4;
  --cyan-400: #22d3ee;
  --cyan-300: #67e8f9;
  --cyan-100: #cffafe;

  /* Colors - Human Violet */
  --violet-700: #6d28d9;
  --violet-600: #7c3aed;
  --violet-500: #8b5cf6;
  --violet-400: #a78bfa;
  --violet-300: #c4b5fd;
  --violet-100: #ede9fe;

  /* Colors - Neutrals */
  --gray-900: #111827;
  --gray-800: #1f2937;
  --gray-700: #374151;
  --gray-600: #4b5563;
  --gray-500: #6b7280;
  --gray-400: #9ca3af;
  --gray-300: #d1d5db;
  --gray-200: #e5e7eb;
  --gray-100: #f3f4f6;
  --gray-50: #f9fafb;
  --white: #ffffff;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #4B79A1 0%, #283E51 100%);
  --gradient-innovation: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);

  /* Typography - System Font Stack */
  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Border Radius */
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-normal: 300ms;
}

/* ============================================
   BASE STYLES
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-primary) !important;
  background-color: var(--white) !important;
  min-height: 100vh;
}

main {
  padding-top: 0 !important;
}

/* ============================================
   CONTRAST SAFETY RULES
   Ensures text is always readable
   ============================================ */

/* Dark backgrounds -> Light text */
[class*="bg-gray-800"],
[class*="bg-gray-900"],
[class*="bg-blue-600"],
[class*="bg-blue-700"],
[class*="bg-blue-800"],
[class*="bg-primary"],
.dark-bg {
  color: var(--white);
}

[class*="bg-gray-800"] h1,
[class*="bg-gray-800"] h2,
[class*="bg-gray-800"] h3,
[class*="bg-gray-800"] h4,
[class*="bg-gray-800"] p,
[class*="bg-gray-900"] h1,
[class*="bg-gray-900"] h2,
[class*="bg-gray-900"] h3,
[class*="bg-gray-900"] h4,
[class*="bg-gray-900"] p {
  color: var(--white) !important;
}

/* Light backgrounds -> Dark text */
[class*="bg-white"],
[class*="bg-gray-100"],
[class*="bg-gray-50"],
.light-bg {
  color: var(--gray-900);
}

[class*="bg-white"] h1,
[class*="bg-white"] h2,
[class*="bg-white"] h3,
[class*="bg-gray-100"] h1,
[class*="bg-gray-100"] h2,
[class*="bg-gray-100"] h3 {
  color: var(--gray-900) !important;
}

/* Button contrast rules - use specific selectors to avoid conflicts */
.main-content .btn-primary,
.content-section .btn-primary,
.cta-section .btn-primary {
  color: var(--white) !important;
}

.main-content .btn-secondary,
.content-section .btn-secondary {
  color: var(--gray-800) !important;
  background: var(--white) !important;
}

/* ============================================
   HEADER - Home Style (Fixed, Dark)
   ============================================ */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(40, 62, 81, 0.95) 0%, rgba(40, 62, 81, 0.85) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

#header.scrolled {
  background: rgba(40, 62, 81, 0.98);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

#header .navbar {
  padding: 0.75rem 0;
}

#header .navbar-brand {
  color: var(--white);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#header .navbar-brand img {
  border-radius: 50%;
}

/* Capellaris logo in header - make it white */
#header .navbar-brand img[alt="Capellaris"] {
  filter: brightness(0) invert(1);
  border-radius: 0;
}

#header .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: color 0.2s ease;
}

#header .nav-link:hover {
  color: var(--cyan-400);
}

#header .nav-link.active {
  color: var(--cyan-400);
}

#header .social-icons a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s ease;
}

#header .social-icons a:hover {
  color: var(--cyan-400);
}

/* Mobile menu toggle */
#header .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3);
  padding: 0.25rem 0.5rem;
}

#header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================================
   HERO SECTION - Particles with gradient to white
   ============================================ */
.hero-section {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 80px; /* Account for fixed header */
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Fallback for browsers that don't support CSS variables in gradients */
  background: linear-gradient(
    180deg,
    #0a0f1a 0%,
    #2a4575 40%,
    #2a4575 60%,
    #556c94 80%,
    #ffffff 100%
  );
  background: linear-gradient(
    180deg,
    #0a0f1a 0%,
    #2a4575 40%,
    #2a4575 60%,
    #556c94 80%,
    var(--white) 100%
  );
  z-index: 1;
}

.hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%; /* Only show particles in dark area */
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 2rem;
}

.hero-content h1 {
  color: var(--white) !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-content p {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}

.hero-content .btn-primary {
  background: var(--gradient-innovation) !important;
  border: none;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
  color: var(--white) !important; /* Ensure contrast on gradient */
}

.hero-content .btn-secondary {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 1);
  color: var(--gray-800);
  font-weight: 600;
}

.hero-content .btn-secondary:hover {
  background: var(--white);
  color: var(--gray-900);
}

/* Internal pages - smaller hero */
.hero-internal {
  min-height: 50vh;
}

.hero-internal .hero-gradient {
  /* Fallback for browsers that don't support CSS variables in gradients */
  background: linear-gradient(
    180deg,
    #0a0f1a 0%,
    #2a4575 40%,
    #2a4575 60%,
    #556c94 80%,
    #ffffff 100%
  );
  background: linear-gradient(
    180deg,
    #0a0f1a 0%,
    #2a4575 40%,
    #2a4575 60%,
    #556c94 80%,
    var(--white) 100%
  );
}

.hero-internal .capellaris-hero-logo object,
.hero-internal .capellaris-hero-logo img {
  width: 96px !important;
  height: 96px !important;
}

/* Main content area */
.main-content {
  background: var(--white);
  position: relative;
  z-index: 1;
}

/* Section title for internal pages */
.section-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-500);
}

.subsection-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 1rem;
}

/* Card styles for internal pages */
.card {
  background-color: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  border: 1px solid var(--gray-200);
}

/* Code block */
.code-block {
  background-color: var(--gray-50);
  border-radius: var(--radius-lg);
  padding: 1rem;
  overflow-x: auto;
  font-family: var(--font-family-mono);
  font-size: 0.875rem;
  color: var(--gray-900);
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.main-content {
  background: var(--white);
  position: relative;
  z-index: 1;
}

.main-content .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Section spacing */
.content-section {
  padding: 4rem 0;
}

.content-section:first-child {
  padding-top: 2rem;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-primary) !important;
  font-weight: 700;
}

p, span, a, li {
  font-family: var(--font-family-primary);
}

/* Old header styles removed - using #header instead */

/* ============================================
   SECTION STYLES
   ============================================ */
.section-title {
  font-family: var(--font-family-primary) !important;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--gray-900) !important;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--primary-600) !important;
}

.subsection-title {
  font-family: var(--font-family-primary) !important;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-800);
  margin-bottom: var(--space-4);
}

/* ============================================
   CARDS - Containers use --radius-xl
   ============================================ */
.card {
  background-color: var(--white);
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
  padding: var(--space-6);
  transition: all var(--duration-normal) var(--ease-out);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg) !important;
}

/* ============================================
   BUTTONS - All buttons use --radius-full
   ============================================ */
.btn-primary {
  background: var(--primary-600) !important;
  color: var(--white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full) !important; /* SEMPRE redondo */
  font-family: var(--font-family-primary);
  font-weight: 500;
  transition: all var(--duration-normal) var(--ease-out);
}

.btn-primary:hover {
  background: var(--primary-700) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Innovation Button */
.btn-innovation {
  background: var(--gradient-innovation) !important;
  color: var(--white);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-full) !important;
  font-family: var(--font-family-primary);
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
  transition: all var(--duration-normal) var(--ease-out);
}

.btn-innovation:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.5);
}

/* ============================================
   CODE BLOCKS
   ============================================ */
.code-block {
  background-color: var(--gray-50) !important;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  overflow-x: auto;
  font-family: var(--font-family-mono) !important;
  font-size: 0.875rem;
  color: var(--gray-900);
  border: 1px solid var(--gray-200);
}

code, pre {
  font-family: var(--font-family-mono) !important;
}

/* ============================================
   NAVIGATION
   ============================================ */
nav a {
  font-family: var(--font-family-primary);
  color: var(--gray-600);
  transition: color var(--duration-normal) var(--ease-out);
}

nav a:hover {
  color: var(--primary-600) !important;
}

/* ============================================
   FOOTER
   ============================================ */
footer {
  background-color: var(--gray-800) !important;
}

footer h3 {
  color: var(--white) !important;
}

footer p {
  color: var(--gray-400);
}

footer nav a {
  color: var(--gray-400);
}

footer nav a:hover {
  color: var(--white) !important;
}

/* ============================================
   CTA SECTION
   ============================================ */
.bg-blue-600,
.cta-section {
  background: var(--gradient-primary) !important;
}

/* Ensure text contrast in CTA sections */
.bg-blue-600 h2,
.bg-blue-600 h3,
.bg-blue-600 p,
.bg-blue-600 span,
.cta-section h2,
.cta-section h3,
.cta-section p,
.cta-section span {
  color: var(--white) !important;
}

.bg-blue-600 a:not(.btn-primary):not(.btn-secondary),
.cta-section a:not(.btn-primary):not(.btn-secondary) {
  color: var(--white) !important;
}

/* CTA buttons with proper contrast */
.bg-blue-600 .bg-white,
.cta-section .btn-light {
  background: var(--white) !important;
  color: var(--primary-700) !important;
}

.bg-blue-600 .bg-blue-800,
.cta-section .btn-dark {
  background: var(--primary-800) !important;
  color: var(--white) !important;
}

/* ============================================
   ICON COLORS (Override Tailwind)
   ============================================ */
.text-blue-600 { color: var(--primary-600) !important; }
.text-green-600 { color: #10b981 !important; }
.text-purple-600 { color: var(--violet-500) !important; }
.text-indigo-600 { color: var(--violet-600) !important; }

/* ============================================
   STEP NUMBERS
   ============================================ */
.bg-blue-100 {
  background: linear-gradient(135deg, var(--primary-100), var(--cyan-100)) !important;
}

.text-blue-800 {
  color: var(--primary-800) !important;
  font-family: var(--font-family-primary);
  font-weight: 700;
}

/* ============================================
   CAPELLARIS HERO LOGO
   ============================================ */
.capellaris-hero-logo {
  position: relative;
  display: inline-block;
}

.capellaris-hero-logo object,
.capellaris-hero-logo img {
  filter: 
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.6))
    drop-shadow(0 0 20px rgba(6, 182, 212, 0.8))
    drop-shadow(0 0 40px rgba(139, 92, 246, 0.6))
    drop-shadow(0 0 60px rgba(6, 182, 212, 0.4));
  animation: glow-pulse-logo 3s ease-in-out infinite;
}

@keyframes glow-pulse-logo {
  0%, 100% {
    filter: 
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.4))
      drop-shadow(0 0 20px rgba(6, 182, 212, 0.6))
      drop-shadow(0 0 40px rgba(139, 92, 246, 0.4))
      drop-shadow(0 0 60px rgba(6, 182, 212, 0.3));
  }
  50% {
    filter: 
      drop-shadow(0 0 12px rgba(255, 255, 255, 0.8))
      drop-shadow(0 0 30px rgba(6, 182, 212, 1))
      drop-shadow(0 0 50px rgba(139, 92, 246, 0.8))
      drop-shadow(0 0 80px rgba(6, 182, 212, 0.5));
  }
}

/* ============================================
   GSAP ANIMATIONS
   ============================================ */
.gsap-fade-up {
  opacity: 1; /* Fallback */
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .section-title {
    font-size: 1.5rem;
  }
  
  .card {
    padding: var(--space-4);
  }
}