/* ===================================
   DESIGN GENERATED BY SEED
   Seed: 01f34d67
   Do not edit manually - regenerate instead
   =================================== */

:root {
  /* Colors - Primary */
  --color-primary: hsl(355 69% 43%);
  --color-primary-h: 355;
  --color-primary-s: 69%;
  --color-primary-l: 43%;

  /* Primary variants */
  --color-primary-50: hsl(355 29% 97%);
  --color-primary-100: hsl(355 39% 94%);
  --color-primary-200: hsl(355 49% 86%);
  --color-primary-300: hsl(355 59% 74%);
  --color-primary-400: hsl(355 69% 62%);
  --color-primary-500: hsl(355 69% 43%);
  --color-primary-600: hsl(355 69% 33%);
  --color-primary-700: hsl(355 69% 28%);
  --color-primary-800: hsl(355 69% 18%);
  --color-primary-900: hsl(355 79% 8%);

  /* Colors - Secondary & Accent */
  --color-secondary: hsl(175 57% 48%);
  --color-accent: hsl(145 74% 51%);
  --color-background: hsl(355 11% 97%);
  --color-surface: hsl(355 6% 100%);

  /* Typography */
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-scale: 1.125;

  /* Shapes */
  --radius: 0.25rem;
  --radius-sm: calc(0.25rem * 0.5);
  --radius-lg: calc(0.25rem * 1.5);
  --radius-xl: calc(0.25rem * 2);

  /* Spacing */
  --section-gap: 6rem;
  --content-gap: 8rem;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Shadows */
  --shadow-card: 0 8px 32px rgba(0,0,0,0.1);
  --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.18);
}

/* === BASE STYLES === */
body {
  font-family: var(--font-body);
  background-color: var(--color-background);
  color: hsl(355 10% 20%);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.25;
  color: hsl(355 15% 15%);
}

/* Type scale */
h1 { font-size: calc(2.5rem * var(--font-scale)); }
h2 { font-size: calc(2rem * var(--font-scale)); }
h3 { font-size: calc(1.5rem * var(--font-scale)); }
h4 { font-size: calc(1.25rem * var(--font-scale)); }

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

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

/* === HEADER === */
.site-header {
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

/* === CARDS === */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  box-shadow: var(--shadow-card);
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.4);
}

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

/* === BUTTONS === */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

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

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--color-surface);
  color: hsl(var(--color-primary-h) 10% 30%);
  border: 1px solid hsl(var(--color-primary-h) 10% 85%);
}

.btn-secondary:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-200);
}

/* === HERO === */
.hero-section {
  text-align: center;
  padding: 6rem 2rem;
  background: linear-gradient(180deg, var(--color-primary-50) 0%, var(--color-background) 100%);
}
.hero-content {
  max-width: 800px;
  margin: 0 auto;
}

/* === ANIMATIONS === */

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Expressive Animations */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px var(--color-primary-200); }
  50% { box-shadow: 0 0 40px var(--color-primary-100); }
}
.animate-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.animate-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}


/* === LAYOUT === */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

section {
  padding: var(--section-gap) 0;
}

/* === PROSE (Articles) === */
.prose {
  max-width: 65ch;
  
}

.prose h2 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-primary-100);
}

.prose h3 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.prose p {
  margin-bottom: 1.25rem;
}

.prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-primary-200);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast);
}

.prose a:hover {
  text-decoration-color: var(--color-primary);
}

.prose ul, .prose ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: hsl(355 10% 35%);
}

/* === SUMMARY BOX (En bref) === */
.summary-box {
  background: linear-gradient(135deg, var(--color-primary-50) 0%, hsl(175 57% 95%) 100%);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
}

.summary-box h3,
.summary-box strong {
  color: var(--color-primary-800);
}

/* === READING PROGRESS === */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  z-index: 9999;
  transition: width 0.1s ease;
}

/* === FOOTER === */
.site-footer {
  background: hsl(355 15% 12%);
  color: hsl(355 10% 75%);
  padding: 4rem 0 2rem;
}

.site-footer a {
  color: hsl(355 10% 85%);
  transition: color var(--transition-fast);
}

.site-footer a:hover {
  color: var(--color-primary-200);
}

.site-footer h3,
.site-footer h4 {
  color: white;
}

/* === UTILITY CLASSES === */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent { color: var(--color-accent); }
.bg-primary { background-color: var(--color-primary); }
.bg-surface { background-color: var(--color-surface); }
.bg-background { background-color: var(--color-background); }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  h1 { font-size: calc(2rem * var(--font-scale)); }
  h2 { font-size: calc(1.5rem * var(--font-scale)); }
  h3 { font-size: calc(1.25rem * var(--font-scale)); }

  .container {
    padding: 0 1rem;
  }

  section {
    padding: calc(var(--section-gap) * 0.7) 0;
  }
}