/* ─── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Neutrals */
  --colour-bg:          #f7f7f6;
  --colour-surface:     #ffffff;
  --colour-border:      #e4e4e2;
  --colour-text:        #2b2b2b;
  --colour-text-muted:  #8a8a87;

  /* Accent — muted sage green */
  --colour-accent:      #7a9e87;
  --colour-accent-soft: #d4e4d9;

  /* Typography */
  --font-family:   'Inter', system-ui, sans-serif;
  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;

  /* Scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  3rem;

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-normal: 500ms;
  --duration-slow:   800ms;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  font-weight: var(--font-weight-light);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--colour-text);
  background-color: var(--colour-bg);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ─── Typography helpers ─────────────────────────────────────────────────────── */
.text-muted  { color: var(--colour-text-muted); }
.text-accent { color: var(--colour-accent); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semi   { font-weight: var(--font-weight-semi); }

/* ─── Layout ─────────────────────────────────────────────────────────────────── */
#app {
  width: 100%;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* ─── Divider ────────────────────────────────────────────────────────────────── */
.divider {
  width: 40px;
  height: 2px;
  background: var(--colour-accent);
  border-radius: var(--radius-full);
}