/*
  Josh Comeau's CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Allow percentage-based heights in the application */
html, body {
  height: 100%;
}

/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/* 7. Remove built-in form typography styles */
input, button, textarea, select {
  font: inherit;
}

/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 9. Create a root stacking context */
#root, #__next {
  isolation: isolate;
}

/*
  ===========================================
  DESIGN SYSTEM - Figma Design Tokens
  ===========================================
*/

:root {
  /* === COLOR PALETTE === */
  
  /* Primary Colors */
  --color-primary: #170E41;
  --color-primary-light: #2C1057;
  --color-accent: #B433D1;
  --color-accent-secondary: #ee7701;
  
  /* Neutral Colors */
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-text-primary: #1E1E1E;
  --color-text-secondary: #535862;
  --color-text-gray: #666666;
  --color-text-light: rgba(255, 255, 255, 0.8);
  
  /* Border Colors */
  --color-border-light: rgba(0, 0, 0, 0.1);
  --color-border-accent: #B433D1;
  --color-border-gray: #ccc;
  
  /* Background Colors */
  --color-bg-white: #FFFFFF;
  --color-bg-light: #f8f9fa;
  --color-bg-gray: #e9ecef;
  
  /* === TYPOGRAPHY === */
  
  /* Font Families */
  --font-primary: 'Product Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-fallback: Arial, sans-serif;
  
  /* Font Sizes */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-md: 1.125rem;     /* 18px */
  --font-size-lg: 1.25rem;      /* 20px */
  --font-size-xl: 1.5rem;       /* 24px */
  --font-size-2xl: 2rem;        /* 32px */
  --font-size-3xl: 3rem;        /* 48px */
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.03em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  
  /* === SPACING === */
  
  /* Base spacing unit: 8px */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 2.5rem;    /* 40px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 5rem;     /* 80px */
  --space-16: 8rem;     /* 128px */
  
  /* === BORDER RADIUS === */
  
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  
  /* === SHADOWS === */
  
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 35px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 20px 50px rgba(0, 0, 0, 0.25);
  
  /* Specific shadows from Figma */
  --shadow-card: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  --shadow-header: 0px 2px 20px 0px rgba(0, 0, 0, 0.05);
  --shadow-service: 0px 0px 0px 0px rgba(199, 199, 199, 0.1), 
                    4px 4px 13px 0px rgba(199, 199, 199, 0.1), 
                    17px 18px 24px 0px rgba(199, 199, 199, 0.09), 
                    37px 40px 33px 0px rgba(199, 199, 199, 0.05);
  
  /* === TRANSITIONS === */
  
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 600ms ease;
  
  /* === LAYOUT === */
  
  /* Container widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  
  /* Z-index scale */
  --z-dropdown: 900;
  --z-sticky: 950;
  --z-fixed: 1000;
  --z-modal-backdrop: 2000;
  --z-modal: 2001;
  --z-popover: 2002;
  --z-tooltip: 2003;
  
  /* === GRADIENTS === */
  
  --gradient-primary: linear-gradient(135deg, #170E41 0%, #2C1057 50%, #B433D1 100%);
  --gradient-accent: linear-gradient(135deg, #170E41 0%, #B433D1 50%, #ee7701 100%);
  --gradient-radial: radial-gradient(circle, rgba(23, 14, 65, 0.55) 0%, rgba(23, 14, 65, 0.05) 100%);
  --gradient-cta: linear-gradient(164deg, rgba(23, 14, 65, 1) 0%, rgba(44, 16, 87, 1) 50%, rgba(180, 51, 209, 1) 100%);
}

/*
  ===========================================
  TYPOGRAPHY SYSTEM
  ===========================================
*/

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
}

/* Heading Styles */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

h1 {
  font-size: var(--font-size-3xl);
  letter-spacing: var(--letter-spacing-tight);
}

h2 {
  font-size: var(--font-size-2xl);
  letter-spacing: var(--letter-spacing-tight);
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-lg);
}

h5 {
  font-size: var(--font-size-md);
}

h6 {
  font-size: var(--font-size-base);
}

/* Text Styles */
p {
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-xl {
  font-size: var(--font-size-xl);
}

/* Display Text (from Figma) */
.display-lg-bold {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3xl);
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-align: center;
}

/*
  ===========================================
  BUTTON SYSTEM
  ===========================================
*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: all var(--transition-base);
  cursor: pointer;
  border: none;
  font-size: var(--font-size-base);
}

.btn-primary {
  background-color: var(--color-accent);
  color: var(--color-white);
}

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

.btn-secondary {
  background-color: transparent;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
}

.btn-secondary:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-border-gray);
}

.btn-outline:hover {
  background-color: var(--color-bg-light);
}

/*
  ===========================================
  CARD SYSTEM
  ===========================================
*/

.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

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

.card-bordered {
  border: 1px solid var(--color-border-light);
}

.card-accent {
  border: 1px solid var(--color-border-accent);
}

/*
  ===========================================
  LAYOUT UTILITIES
  ===========================================
*/

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.section {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.section-sm {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.section-lg {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

/*
  ===========================================
  RESPONSIVE BREAKPOINTS
  ===========================================
*/

/* Mobile: < 768px (default) */
/* Tablet: 768px - 991px */
@media screen and (min-width: 768px) {
  :root {
    --font-size-3xl: 3.5rem;
    --font-size-2xl: 2.5rem;
  }
  
  .container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

/* Desktop: 992px - 1279px */
@media screen and (min-width: 992px) {
  :root {
    --font-size-3xl: 4rem;
  }
}

/* Large Desktop: >= 1280px */
@media screen and (min-width: 1280px) {
  .container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

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

/* Spacing */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* Text Alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Display */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }

/* Flexbox */
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }

/* Gap */
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Colors */
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-white { color: var(--color-white); }
.text-gray { color: var(--color-text-gray); }

.bg-primary { background-color: var(--color-primary); }
.bg-accent { background-color: var(--color-accent); }
.bg-white { background-color: var(--color-white); }
.bg-light { background-color: var(--color-bg-light); }

/* Border Radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Transitions */
.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }