/* =========================================================
   BASE — reset, design tokens, typography
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Color */
  --c-bg:        #ffffff;
  --c-ink:       #0a0a0a;
  --c-ink-soft:  #2a2a2a;
  --c-mute:      #6b6557;
  --c-line:      #eeeeee;
  --c-dark:      #0a0a0a;
  --c-dark-2:    #1c1814;
  --c-cream:     #f5f3ee;
  --c-accent:    #ff6b35;
  --c-success:   #1a8a4a;
  --c-success-bg:#e6f7ed;

  /* Typography — Inter throughout, weight does the work */
  --ff-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-serif:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Layout */
  --topbar-pad-y: 28px;
  --topbar-pad-x: 40px;

  /* Motion */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-swipe:  cubic-bezier(0.6, 0, 0.2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-sans);
  background: var(--c-bg);
  color: var(--c-ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* Global: strip italic from <em> — accents come from weight, not style */
em { font-style: normal; font-weight: 400; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}