/* ============================================
   CSS Architecture — Section & Spacing System
   From design-foundations skill (css-architecture.md)
   ============================================ */

:root {
  /* Section padding — 3 levels */
  --padding-section-sm: clamp(2.5rem, 2rem + 2vw, 4rem);
  --padding-section-md: clamp(4rem, 3rem + 3vw, 6rem);
  --padding-section-lg: clamp(5rem, 4rem + 4vw, 8rem);

  /* Horizontal page margins */
  --padding-global: clamp(1rem, 0.5rem + 2vw, 4rem);

  /* Container widths */
  --container-sm: 600px;
  --container-md: 768px;
  --container-default: 1200px;
  --container-lg: 1440px;

  /* Easing (from motion-design.md) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Base typography (overridden per-concept via inline styles) */
  --font-body: system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-body);
  --text-base: 1rem;
  --line-height-body: 1.6;
  --line-height-heading: 1.15;
}

/* ---- Utility Classes ---- */

/* Horizontal margins — always applied */
.padding-global {
  padding-left: var(--padding-global);
  padding-right: var(--padding-global);
}

/* Section vertical spacing — pick one per section */
.padding-section-sm {
  padding-top: var(--padding-section-sm);
  padding-bottom: var(--padding-section-sm);
}
.padding-section-md {
  padding-top: var(--padding-section-md);
  padding-bottom: var(--padding-section-md);
}
.padding-section-lg {
  padding-top: var(--padding-section-lg);
  padding-bottom: var(--padding-section-lg);
}

/* Containers — pick one per section */
.container-sm  { max-width: var(--container-sm);  margin-inline: auto; width: 100%; }
.container-md  { max-width: var(--container-md);  margin-inline: auto; width: 100%; }
.container     { max-width: var(--container-default); margin-inline: auto; width: 100%; }
.container-lg  { max-width: var(--container-lg);  margin-inline: auto; width: 100%; }

/* ---- Base Typography ---- */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-height-body);
  color: var(--color-text, #1a1a1a);
  background-color: var(--color-bg, #ffffff);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--line-height-heading);
  font-weight: 700;
}

/* ---- Reduced Motion ---- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- GSAP Ready State ---- */
/* Elements with .reveal start hidden when GSAP is loaded */
.gsap-ready .reveal {
  opacity: 0;
}