/* ==========================================================================
   Base — design tokens, reset and element defaults.
   ========================================================================== */

:root {
  /* Accent kept as a raw triplet so it can be used with alpha via rgb(). */
  --accent-rgb: 60, 120, 255;

  --color-bg: rgb(248, 250, 255);
  --color-ink: rgb(0, 0, 0);
  --color-ink-soft: rgb(53, 53, 53);
  --color-text-muted: rgb(85, 85, 85);
  --color-link-hover: rgb(181, 181, 181);
  --color-surface: rgba(var(--accent-rgb), 0.08);
  --color-surface-strong: rgba(var(--accent-rgb), 0.15);

  --font-body: "Poppins", sans-serif;

  --radius-card: 2rem;
  --radius-image: 1rem;

  --transition: all 300ms ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  overflow-x: hidden;
}

p {
  color: var(--color-text-muted);
}

a,
.btn {
  transition: var(--transition);
}

a {
  color: var(--color-ink);
  text-decoration: none;
  text-decoration-color: white;
}

a:hover {
  color: grey;
  text-decoration: underline;
  text-underline-offset: 1rem;
  text-decoration-color: var(--color-link-hover);
}

/* Page content sits above the animated canvas background. */
nav,
section,
footer {
  position: relative;
  z-index: 1;
}