/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ─── TOKENS ─── */
:root {
  /* Neumorphism Palette: Light Grey & Dark Wool */
  --bg-color:     #EAEAEA; /* Light grey base */
  --surface:      #EAEAEA;
  --white:        #FFFFFF;
  --primary:      #222222; /* Dark Wool */
  --accent:       #1A1A1A; /* Dark Wool CTA */
  --accent-dark:  #000000;
  --text:         #222222; /* Dark Wool Text */
  --text-muted:   #555555;
  
  /* Aggressive Neumorphic Shadows for #EAEAEA */
  --shadow-neu:        10px 10px 20px #cbcbcb, 
                       -10px -10px 20px #ffffff;
  --shadow-neu-sm:     5px 5px 10px #cbcbcb, 
                       -5px -5px 10px #ffffff;
  --shadow-neu-inset:  inset 8px 8px 16px #cbcbcb, 
                       inset -8px -8px 16px #ffffff;
                       
  /* Ultra-3D Claymorphic Shadows */
  --shadow-clay:       12px 12px 24px #cbcbcb, 
                       inset -8px -8px 16px rgba(0,0,0,0.05), 
                       inset 8px 8px 16px rgba(255,255,255,0.9);
  --shadow-clay-press: inset 8px 8px 16px #cbcbcb, 
                       inset -8px -8px 16px #ffffff;

  --wa-green:     #25D366;
  --danger:       #EF4444;
  --spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --font:         'Inter', system-ui, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  --radius:       32px; /* Chunky for clay */
  --radius-sm:    16px;
  --gap:          clamp(24px, 4vw, 48px);
}

/* ─── BASE TYPOGRAPHY ─── */
body { 
  font-family: var(--font); 
  color: var(--text); 
  background: var(--bg-color);
  line-height: 1.6; 
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); font-weight: 700; }
h2 { font-size: clamp(2rem, 3.5vw, 3.2rem); font-weight: 600; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 600; }
p  { color: var(--text-muted); font-size: 1.05rem; }

/* Utility classes */
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.bg-surface { background: var(--surface); }
.accent-text { color: var(--accent); }