/* ========================================
   100xGood Design System — Base Styles
   Updated: April 2026
   ======================================== */

/* Reset */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

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

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-default);
  background-color: var(--bg-page);
  background-image: radial-gradient(ellipse at center, var(--opal) 0%, #F3EFEF 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

[data-theme="dark"] body {
  background-image: radial-gradient(ellipse at center, #14141C 0%, #0B0B11 100%);
}

/* Subtle noise texture overlay (brand motif) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

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

h1, .h1 {
  font-family: var(--font-display-sans);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-heading);
}

h2, .h2 {
  font-family: var(--font-display-sans);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-heading);
}

h3, .h3 {
  font-family: var(--font-display-sans);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-heading);
}

h4, .h4 {
  font-family: var(--font-display-sans);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-heading);
}

p, li {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-default);
}

a {
  font-family: var(--font-body);
  color: var(--text-default);
  text-decoration: none;
  transition: color var(--transition-fast);
  cursor: pointer;
}

a:hover {
  color: var(--jade);
}

/* In-content links — exclude nav and footer */
.content a,
main p a,
main li a,
article p a,
article li a {
  color: var(--violet-topaz);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.content a:hover,
main p a:hover,
main li a:hover,
article p a:hover,
article li a:hover {
  color: var(--jade);
}

code, pre {
  font-family: var(--font-mono);
}

/* ===================
   BRAND TYPOGRAPHY PATTERNS
   =================== */

/* Display variants */
.display-serif {
  font-family: var(--font-display-serif);
  font-style: italic;
  font-weight: 300;
}

.display-mixed em {
  font-family: var(--font-display-serif);
  font-style: italic;
  font-weight: 300;
}

.display-mixed strong {
  font-family: var(--font-display-sans);
  font-style: normal;
  font-weight: 800;
}

/* Signature serif/sans headline split
   Usage:
   <h1 class="headline-split">
     <span class="line-1">Modern Revenue Infrastructure</span>
     <span class="line-2">for Impact Organizations</span>
   </h1> */
.headline-split .line-1 {
  font-family: var(--font-display-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-heading);
  display: block;
}

.headline-split .line-2 {
  font-family: var(--font-display-sans);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-heading);
  display: block;
}

/* Gradient text — 3-stop Eggplant → Amethyst → Rose Quartz Deep (for visibility) */
.text-gradient {
  background: linear-gradient(135deg, var(--eggplant) 0%, var(--amethyst) 55%, #D4A0A0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="dark"] .text-gradient {
  background: linear-gradient(135deg, var(--white) 0%, var(--rose-quartz) 50%, var(--amethyst) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===================
   FOCUS STATES
   =================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--amethyst);
  outline-offset: 3px;
}

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

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-muted { color: var(--text-muted); }
.text-heading { color: var(--text-heading); }
.text-inverse { color: var(--text-inverse); }

.font-serif { font-family: var(--font-display-serif); }
.font-sans { font-family: var(--font-display-sans); }
.font-mono { font-family: var(--font-mono); }
.font-ui { font-family: var(--font-ui); }

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

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===================
   REVEAL ANIMATIONS
   =================== */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s 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; }
.reveal-delay-5 { transition-delay: 0.5s; }