@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@600&family=Source+Sans+Pro:wght@400;600&display=swap');

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* Colors */
  --color-bg:         #f9fafb;
  --color-surface:    #ffffff;
  --color-border:     #e5e7eb;
  --color-text:       #000000;
  --color-text-mid:   #374151;
  --color-shadow-1:   rgba(12, 12, 13, 0.10);
  --color-shadow-2:   rgba(12, 12, 13, 0.05);

  /* Typography */
  --font-serif:       'Source Serif Pro', Georgia, serif;
  --font-sans:        'Source Sans Pro', sans-serif;

  /* Radii */
  --radius-card:      24px;
  --radius-sidebar:   20px;
  --radius-pill:      980px;

  /* Spacing */
  --space-page-x:     50px;
  --space-page-y:     20px;
  --space-card:       20px;

  /* Layout */
  --nav-height:       64px;
}

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

html {
  scroll-behavior: smooth;
}

/* ── Base body ──────────────────────────────────────────────── */
body {
  background:               var(--color-bg);
  font-family:              var(--font-sans);
  font-size:                14px;
  line-height:              1.5;
  color:                    var(--color-text);
  -webkit-font-smoothing:   antialiased;
  -moz-osx-font-smoothing:  grayscale;
}