/* ==========================================================================
   css/variables.css
   Design tokens — all CSS custom properties shared across every page.
   Update values here and they cascade to the entire project.
   ========================================================================== */

:root {
  /* Background palette */
  --bg: #07120f;
  --bg-deep: #030807;
  --bg-elevated: rgba(14, 27, 23, 0.88);

  /* Surface layers */
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.07);
  --surface-3: rgba(255, 255, 255, 0.11);

  /* Border / line */
  --line: rgba(203, 240, 228, 0.12);
  --line-strong: rgba(203, 240, 228, 0.22);

  /* Typography */
  --text: #f2fbf8;
  --muted: rgba(220, 244, 236, 0.74);
  --muted-soft: rgba(220, 244, 236, 0.52);

  /* Accent colours */
  --accent: #1dc693;
  --accent-2: #86f4d1;
  --accent-3: #0f8b6a;
  --glow: rgba(29, 198, 147, 0.28);
  --warm: #d2b987;

  /* Error (used on signup form) */
  --error: #ff8c8c;

  /* Shadows */
  --shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 16px 48px rgba(0, 0, 0, 0.24);

  /* Border radii */
  --radius-xs: 10px;
  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 34px;
  --radius-xl: 44px;

  /* Spacing / sizing */
  --max-width: 1240px;

  /* Typography stacks */
  --display: "Bricolage Grotesque", sans-serif;
  --body: "Manrope", sans-serif;

  /* Layout helpers (home page specific, harmless on other pages) */
  --nav-h: 84px;
  --cursor-x: 50vw;
  --cursor-y: 26vh;

  /* Page background gradient (home page) */
  --page-bg:
    radial-gradient(circle at top left, rgba(22, 137, 107, 0.24), transparent 34%),
    radial-gradient(circle at 85% 12%, rgba(134, 244, 209, 0.12), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(29, 198, 147, 0.08), transparent 32%),
    linear-gradient(180deg, #07120f 0%, #06100d 32%, #040907 100%);
}