/*
 * ============================================================
 * base.css — Design tokens (colors, fonts, sizes) and global resets
 * ============================================================
 *
 * WHAT THIS FILE DOES:
 *   - Defines the site's color palette and size values (CSS variables).
 *   - Sets very basic rules that apply to every element on the page.
 *
 * EDITING TIPS (no CSS knowledge required):
 *   - To change the main green accent color, edit --accent, --accent-strong, --accent-deep
 *     (lines 35–37 in this file).
 *   - To change the dark background color, edit --bg.
 *   - To change the main text color, edit --text.
 *   - To change the muted/secondary text color, edit --muted.
 *   - To change the body font, replace "Inter" with another font name in the body rule.
 *   - Do NOT remove variables — they are used throughout all other CSS files.
 *
 * DEPENDENCIES:
 *   - All other CSS files read from the variables defined here.
 *   - Must be loaded FIRST in index.html (before any other stylesheet).
 * ============================================================
 */

/* ── Color and size variables ─────────────────────────────── */
:root {
  --bg: #060807;
  --bg-elevated: #0a0d0b;
  --surface: #0d1210;
  --surface-2: #121816;
  --surface-3: #161f1b;
  --border: rgba(123, 255, 192, 0.08);
  --border-strong: rgba(123, 255, 192, 0.14);
  --text: #f2fff7;
  --muted: #a4b2aa;
  --accent: #28d978;
  --accent-strong: #42f39a;
  --accent-deep: #1aa45d;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  --radius: 22px;
  --radius-sm: 16px;
  --container: 1180px;
}

/* ── Global resets ────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(circle at top, rgba(40, 217, 120, 0.08), transparent 26%),
    linear-gradient(180deg, #070908 0%, #060807 100%);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }