/* ════════════════════════════════════════════════════
   base.css — Reset, design tokens, root styles
   Edit this file to change: colours, fonts, spacing,
   border-radius, shadows
════════════════════════════════════════════════════ */

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

/* ── Design Tokens ───────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:        #FAFAF7;           /* main page background */
  --bg-warm:   #F3EDE2;           /* alternate section background */
  --bg-sage:   rgba(90,148,112,0.06); /* very light sage tint */
  --surface:   #FFFFFF;           /* card / panel surfaces */

  /* Brand Colours */
  --sage:       #5A9470;          /* primary accent (sage green) */
  --sage-hover: #4a7d5f;          /* sage on hover */
  --sage-2:     rgba(90,148,112,0.12);
  --sage-3:     rgba(90,148,112,0.06);
  --clay:       #C07860;          /* warm terracotta secondary */
  --clay-2:     rgba(192,120,96,0.10);
  --amber:      #B8935A;          /* warm amber tertiary */

  /* Text */
  --text:       #1A1512;          /* near-black (warm) */
  --text-muted: #78716C;          /* body muted text */
  --text-light: #A8A29E;          /* placeholder / meta text */

  /* Borders */
  --border:      rgba(26,21,18,0.08);
  --border-sage: rgba(90,148,112,0.22);

  /* Shadows */
  --shadow-sm: 0 2px 12px rgba(26,21,18,0.05);
  --shadow-md: 0 8px 32px rgba(26,21,18,0.08);
  --shadow-lg: 0 24px 64px rgba(26,21,18,0.11);

  /* Shape */
  --r:    16px;   /* card border-radius */
  --r-sm: 10px;   /* small border-radius */

  /* Animation */
  --spring: cubic-bezier(0.16, 1, 0.3, 1); /* Apple-style spring easing */
}

/* ── Base HTML / Body ────────────────────────────── */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: 'Geist', sans-serif;
  overflow-x:  hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

::selection {
  background: var(--sage-2);
}

/* ── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(90,148,112,0.3); border-radius: 2px; }