/**
 * Aurora Design System - Color Palette
 * Professional color scheme inspired by modern SaaS companies
 */

:root {
    /* ===== Primary Colors - Aurora Brand ===== */
    --aurora-primary: #6366F1;              /* Indigo - Main brand color */
    --aurora-primary-dark: #4F46E5;         /* Darker indigo - Hover states */
    --aurora-primary-light: #818CF8;        /* Light indigo - Subtle accents */
    --aurora-primary-50: #EEF2FF;           /* Very light indigo - Backgrounds */
    
    /* ===== Accent Colors - Aurora Glow ===== */
    --aurora-accent: #EC4899;               /* Pink/Magenta - Energy, creativity */
    --aurora-accent-dark: #DB2777;          /* Darker pink */
    --aurora-accent-light: #F0ABFC;         /* Light purple - Glow effects */
    
    /* ===== Neutral Colors - Professional ===== */
    --aurora-bg: #FAFAFA;                   /* Warm off-white background */
    --aurora-surface: #FFFFFF;              /* Cards, modals, elevated surfaces */
    --aurora-border: #E5E7EB;               /* Borders and dividers */
    --aurora-border-dark: #D1D5DB;          /* Darker borders */
    
    /* ===== Text Hierarchy ===== */
    --aurora-text-primary: #111827;         /* Headings, important text */
    --aurora-text-secondary: #6B7280;       /* Body text, descriptions */
    --aurora-text-tertiary: #9CA3AF;        /* Muted text, labels */
    --aurora-text-inverse: #FFFFFF;         /* Text on dark backgrounds */
    
    /* ===== Status Colors ===== */
    --aurora-success: #10B981;              /* Green - Success states */
    --aurora-success-light: #D1FAE5;        /* Light green bg */
    --aurora-warning: #F59E0B;              /* Amber - Warnings */
    --aurora-warning-light: #FEF3C7;        /* Light amber bg */
    --aurora-error: #EF4444;                /* Red - Errors */
    --aurora-error-light: #FEE2E2;          /* Light red bg */
    --aurora-info: #3B82F6;                 /* Blue - Info */
    --aurora-info-light: #DBEAFE;           /* Light blue bg */
    
    /* ===== Dark Mode Colors ===== */
    --aurora-dark-bg: #0F172A;              /* Deep navy background */
    --aurora-dark-surface: #1E293B;         /* Elevated surfaces in dark mode */
    --aurora-dark-border: #334155;          /* Borders in dark mode */
    --aurora-dark-text-primary: #F1F5F9;    /* Primary text in dark mode */
    --aurora-dark-text-secondary: #CBD5E1;  /* Secondary text in dark mode */
    
    /* ===== Gradients ===== */
    --aurora-gradient-primary: linear-gradient(135deg, var(--aurora-primary) 0%, var(--aurora-accent) 100%);
    --aurora-gradient-surface: linear-gradient(180deg, var(--aurora-surface) 0%, var(--aurora-bg) 100%);
    --aurora-gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* ===== Typography Scale (Modular Scale 1.250 fluid) ===== */
    /* clamp(min, preferred (calc), max) */
    --text-xs: clamp(0.75rem, 0.70rem + 0.25vw, 0.8125rem); /* ~12px to 13px */
    --text-sm: clamp(0.875rem, 0.83rem + 0.25vw, 0.9375rem); /* ~14px to 15px */
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);    /* ~16px to 18px */
    --text-lg: clamp(1.125rem, 1.05rem + 0.38vw, 1.25rem);   /* ~18px to 20px */
    --text-xl: clamp(1.25rem, 1.15rem + 0.50vw, 1.5rem);     /* ~20px to 24px */
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);   /* ~24px to 30px */
    --text-3xl: clamp(1.875rem, 1.58rem + 1.5vw, 2.5rem);    /* ~30px to 40px */
    --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);    /* ~36px to 52px */
    --text-5xl: clamp(2.8rem, 2.05rem + 3.75vw, 4.5rem);     /* ~45px to 72px */
    
    /* ===== Font Weights ===== */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* ===== Spacing Scale (Fluid) ===== */
    --space-1: clamp(0.25rem, 0.25vw + 0.2rem, 0.3rem);      /* ~4px to 5px */
    --space-2: clamp(0.5rem, 0.5vw + 0.4rem, 0.6rem);        /* ~8px to 10px */
    --space-3: clamp(0.75rem, 0.75vw + 0.6rem, 0.9rem);      /* ~12px to 14px */
    --space-4: clamp(1rem, 1vw + 0.8rem, 1.25rem);           /* ~16px to 20px */
    --space-5: clamp(1.25rem, 1.25vw + 1rem, 1.5rem);        /* ~20px to 24px */
    --space-6: clamp(1.5rem, 1.5vw + 1.1rem, 2rem);          /* ~24px to 32px */
    --space-8: clamp(2rem, 2vw + 1.5rem, 3rem);              /* ~32px to 48px */
    --space-10: clamp(2.5rem, 2.5vw + 1.8rem, 4rem);         /* ~40px to 64px */
    --space-12: clamp(3rem, 3vw + 2rem, 4.5rem);             /* ~48px to 72px */
    --space-16: clamp(4rem, 4vw + 3rem, 6rem);               /* ~64px to 96px */
    --space-20: clamp(5rem, 5vw + 3.5rem, 8rem);             /* ~80px to 128px */
    --space-24: clamp(6rem, 6vw + 4.5rem, 10rem);            /* ~96px to 160px */
    --space-32: clamp(8rem, 8vw + 6rem, 12rem);              /* ~128px to 192px */
    
    /* ===== Border Radius ===== */
    --radius-sm: 0.25rem;                   /* 4px */
    --radius-md: 0.5rem;                    /* 8px */
    --radius-lg: 0.75rem;                   /* 12px */
    --radius-xl: 1rem;                      /* 16px */
    --radius-2xl: 1.5rem;                   /* 24px */
    --radius-full: 9999px;                  /* Pill shape */
    
    /* ===== Shadows (Elevation System) ===== */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-glow: 0 0 20px rgb(99 102 241 / 0.3);
    
    /* ===== Transitions ===== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ===== Z-Index Scale ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ===== Base Resets ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--aurora-bg);
    color: var(--aurora-text-primary);
    line-height: 1.6;
    font-size: var(--text-base);
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-bold);
    line-height: 1.2;
    color: var(--aurora-text-primary);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
    color: var(--aurora-text-secondary);
    margin-bottom: var(--space-4);
}

a {
    color: var(--aurora-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--aurora-primary-dark);
}

/* ===== Utility Classes ===== */
.text-primary { color: var(--aurora-text-primary); }
.text-secondary { color: var(--aurora-text-secondary); }
.text-tertiary { color: var(--aurora-text-tertiary); }
.text-inverse { color: var(--aurora-text-inverse); }

.bg-primary { background-color: var(--aurora-primary); }
.bg-surface { background-color: var(--aurora-surface); }
.bg-accent { background-color: var(--aurora-accent); }

.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }

/* ===================================
   REVIEW SECTION - Avaliação Google
   =================================== */
.review-section {
  padding: var(--spacing-3xl) 0;
}

.review-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.85) 0%, rgba(30, 20, 60, 0.80) 100%);
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 24px;
  padding: var(--spacing-3xl) var(--spacing-2xl);
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(168, 85, 247, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(168, 85, 247, 0.25);
}

.review-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: var(--spacing-lg);
}

.star {
  font-size: 28px;
  color: #a855f7;
  display: inline-block;
  animation: starPop 0.5s ease backwards;
}
.star:nth-child(1) { animation-delay: 0.0s; color: #c084fc; }
.star:nth-child(2) { animation-delay: 0.1s; color: #a855f7; }
.star:nth-child(3) { animation-delay: 0.2s; color: #9333ea; }
.star:nth-child(4) { animation-delay: 0.3s; color: #a855f7; }
.star:nth-child(5) { animation-delay: 0.4s; color: #c084fc; }

@keyframes starPop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);   opacity: 1; }
}

.review-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.review-description {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: var(--spacing-xl);
}

.btn-review-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #1a1a2e;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  border: none;
  letter-spacing: 0.02em;
}

.btn-review-google:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 28px rgba(168, 85, 247, 0.35);
  background: #f8f8ff;
}

.btn-review-google:active {
  transform: translateY(-1px);
}

.google-icon {
  flex-shrink: 0;
}