/**
 * Design Token CSS System
 *
 * This file defines CSS custom properties and utility classes that components
 * reference for tier-based visual differentiation. The Astro layout injects
 * appropriate classes on the body element based on ThemeConfig.
 */

/* =============================================================================
   SPACING SCALES
   Applied as classes on the body: .spacing-standard, .spacing-generous, .spacing-editorial
   ============================================================================= */

.spacing-standard {
  --section-padding-y: 4rem;
  --section-padding-x: 1.5rem;
  --content-gap: 1.5rem;
  --card-padding: 1.5rem;
  --heading-margin-bottom: 1rem;
  --grid-gap: 1.5rem;
}

.spacing-generous {
  --section-padding-y: 6rem;
  --section-padding-x: 2rem;
  --content-gap: 2rem;
  --card-padding: 2rem;
  --heading-margin-bottom: 1.5rem;
  --grid-gap: 2rem;
}

.spacing-editorial {
  --section-padding-y: 8rem;
  --section-padding-x: 2.5rem;
  --content-gap: 2.5rem;
  --card-padding: 2.5rem;
  --heading-margin-bottom: 2rem;
  --grid-gap: 2.5rem;
}

/* =============================================================================
   ANIMATION CLASSES
   Applied as classes on the body: .animate-none, .animate-fade-in, .animate-staggered
   Elements with [data-animate] attribute will be affected
   ============================================================================= */

/* No animations - elements visible immediately */
.animate-none [data-animate] {
  opacity: 1;
  transform: none;
}

/* Fade in on scroll - smooth fade with slight rise */
.animate-fade-in [data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-fade-in [data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered reveal - cascading animation for multiple elements */
.animate-staggered [data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.animate-staggered [data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for child elements */
.animate-staggered [data-animate]:nth-child(1) { transition-delay: 0ms; }
.animate-staggered [data-animate]:nth-child(2) { transition-delay: 100ms; }
.animate-staggered [data-animate]:nth-child(3) { transition-delay: 200ms; }
.animate-staggered [data-animate]:nth-child(4) { transition-delay: 300ms; }
.animate-staggered [data-animate]:nth-child(5) { transition-delay: 400ms; }
.animate-staggered [data-animate]:nth-child(6) { transition-delay: 500ms; }
.animate-staggered [data-animate]:nth-child(7) { transition-delay: 600ms; }
.animate-staggered [data-animate]:nth-child(8) { transition-delay: 700ms; }

/* =============================================================================
   SHADOW LEVELS
   Applied as classes on the body: .shadow-none, .shadow-subtle, .shadow-layered
   Components reference --card-shadow for consistent shadow application
   ============================================================================= */

.shadow-none {
  --card-shadow: none;
}

.shadow-subtle {
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.shadow-layered {
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 10px 15px rgba(0, 0, 0, 0.06), 0 20px 25px rgba(0, 0, 0, 0.04);
}

/* =============================================================================
   BUTTON STYLES
   Utility classes for tier-appropriate button rendering
   ============================================================================= */

/* Starter tier - simple solid button */
.btn-solid {
  display: inline-block;
  background-color: var(--color-primary);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
  cursor: pointer;
  border: none;
}

.btn-solid:hover {
  filter: brightness(0.9);
}

/* Professional tier - solid with hover lift effect */
.btn-solid-hover-lift {
  display: inline-block;
  background-color: var(--color-primary);
  color: white;
  padding: 0.875rem 2rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  border: none;
}

.btn-solid-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Premium tier - gradient with glow effect */
.btn-gradient-glow {
  display: inline-block;
  background: linear-gradient(135deg, var(--color-accent), var(--color-gradient-to, var(--color-primary)));
  color: white;
  padding: 1rem 2.5rem;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px var(--color-accent-shadow, rgba(0, 0, 0, 0.2));
  cursor: pointer;
  border: none;
}

.btn-gradient-glow:hover {
  box-shadow: 0 6px 20px var(--color-accent-shadow, rgba(0, 0, 0, 0.3));
  transform: translateY(-1px);
}

/* Secondary/outline button variants */
.btn-outline {
  display: inline-block;
  background-color: transparent;
  color: var(--color-primary);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 2px solid var(--color-primary);
}

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

/* =============================================================================
   CARD STYLES
   Utility classes for tier-appropriate card rendering
   ============================================================================= */

/* Starter tier - flat card */
.card-flat {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: var(--card-padding);
}

/* Professional tier - subtle shadow */
.card-subtle-shadow {
  background-color: white;
  border: 1px solid #f3f4f6;
  border-radius: var(--radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.3s ease;
}

.card-subtle-shadow:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Premium tier - elevated with border accent */
.card-elevated-with-border {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: all 0.3s ease;
}

.card-elevated-with-border:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* =============================================================================
   IMAGE STYLES
   Utility classes for tier-appropriate image rendering
   ============================================================================= */

/* Starter tier - standard image */
.img-standard {
  border-radius: 0;
}

/* Professional tier - rounded corners */
.img-rounded {
  border-radius: var(--radius);
}

/* Premium tier - rounded with shadow */
.img-rounded-shadow {
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* =============================================================================
   SECTION DIVIDERS
   Applied as classes on section elements for decorative transitions
   ============================================================================= */

/* Wave divider - smooth curve transition */
.divider-wave {
  position: relative;
}

.divider-wave::after {
  content: '';
  display: block;
  width: 100%;
  height: 60px;
  background: var(--next-section-bg, #ffffff);
  clip-path: ellipse(55% 100% at 50% 100%);
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 1;
}

/* Angle divider - diagonal cut transition */
.divider-angle {
  position: relative;
}

.divider-angle::after {
  content: '';
  display: block;
  width: 100%;
  height: 80px;
  background: var(--next-section-bg, #ffffff);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 1;
}

/* =============================================================================
   SECTION BACKGROUNDS
   Color utility classes for section backgrounds
   ============================================================================= */

.bg-surface {
  background-color: var(--color-surface, #ffffff);
}

.bg-surface-alt {
  background-color: var(--color-surface-alt, #f8f9fa);
}

.bg-surface-dark {
  background-color: var(--color-surface-dark, var(--color-primary));
  color: white;
}

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

/* =============================================================================
   TYPOGRAPHY UTILITIES
   ============================================================================= */

.font-heading {
  font-family: var(--font-heading);
}

.font-body {
  font-family: var(--font-body);
}

.font-accent {
  font-family: var(--font-accent, var(--font-heading));
}

/* =============================================================================
   RADIUS UTILITIES
   ============================================================================= */

.radius-sm { --radius: 4px; }
.radius-md { --radius: 8px; }
.radius-lg { --radius: 12px; }
.radius-xl { --radius: 16px; }

/* =============================================================================
   REVEAL-SECTION SCROLL ENTRANCE ANIMATIONS
   Used by scroll-animation.js IntersectionObserver: adds .in-view when section
   enters the viewport. Children opt-in via reveal-child, slide-from-*, etc.
   ============================================================================= */

/* Staggered card/item reveal */
.reveal-section .reveal-child {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-section.in-view .reveal-child {
  opacity: 1;
  transform: translateY(0);
}

/* Directional slides for split layouts */
.reveal-section .slide-from-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-section .slide-from-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-section.in-view .slide-from-left,
.reveal-section.in-view .slide-from-right {
  opacity: 1;
  transform: translateX(0);
}

/* Hero above-fold entrance (CSS animation, not observer-based) */
.hero-animate {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeUp 0.8s ease forwards;
}
@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-section .reveal-child,
  .reveal-section .slide-from-left,
  .reveal-section .slide-from-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-animate {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
  .spacing-standard {
    --section-padding-y: 3rem;
    --section-padding-x: 1rem;
  }

  .spacing-generous {
    --section-padding-y: 4rem;
    --section-padding-x: 1.25rem;
  }

  .spacing-editorial {
    --section-padding-y: 5rem;
    --section-padding-x: 1.5rem;
  }

  .divider-wave::after,
  .divider-angle::after {
    height: 40px;
  }
}