/* ============================================================
   Base — design tokens, reset, page shell
   ============================================================ */
:root {
  /* ---- Brand / accent (RGB channels — use rgb(var(--x-rgb) / alpha)) ---- */
  --accent-rgb: 253 0 23;
  --accent-hover-rgb: 255 41 56;
  --accent-fg-rgb: 255 255 255;
  --accent-soft-rgb: 42 17 20;
  --accent: rgb(var(--accent-rgb));
  --accent-hover: rgb(var(--accent-hover-rgb));
  --accent-fg: rgb(var(--accent-fg-rgb));
  --accent-soft: rgb(var(--accent-soft-rgb));

  /* ---- Surface & text (RGB channels) ---- */
  --bg-rgb: 16 17 22;
  --fg-rgb: 242 243 247;
  --muted-rgb: 146 151 163;
  --line-rgb: 38 40 50;
  --field-bg-rgb: 26 28 36;
  --bg: rgb(var(--bg-rgb));
  --fg: rgb(var(--fg-rgb));
  --muted: rgb(var(--muted-rgb));
  --line: rgb(255 255 255 / 0.12);
  --field-bg: rgb(var(--field-bg-rgb));
  --bg-grad:
    radial-gradient(1100px 640px at 50% -15%, rgb(var(--accent-rgb) / .28), rgb(var(--accent-rgb) / 0) 60%),
    radial-gradient(620px 760px at -6% 45%, rgb(var(--accent-rgb) / .14), rgb(var(--accent-rgb) / 0) 60%),
    radial-gradient(620px 760px at 106% 55%, rgb(var(--accent-rgb) / .14), rgb(var(--accent-rgb) / 0) 60%),
    radial-gradient(900px 620px at 50% 50%, rgb(var(--accent-rgb) / .06), rgb(var(--accent-rgb) / 0) 65%),
    radial-gradient(820px 540px at 100% 2%, rgb(28 15 22 / .9), rgb(28 15 22 / 0) 55%),
    radial-gradient(760px 540px at 0% 98%, rgb(14 20 32 / .9), rgb(14 20 32 / 0) 55%),
    rgb(var(--bg-rgb));

  /* ---- Radii ---- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ---- Typography ---- */
  --font-sans: "workSans", "workSans Fallback", "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-h1: 28px;
  --fs-body: 15px;
  --fs-field: 18px;
  --fs-btn: 17px;
  --fw-bold: 800;

  /* ---- Layout & motion ---- */
  --max: 416px;
  --ease: .35s ease;
  --ease-fast: .15s ease;

  /* ---- Aliases (back-compat with existing rules) ---- */
  --brand: var(--accent);
  --brand-fg: var(--accent-fg);
  --brand-soft: var(--accent-soft);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow-x: hidden;
}

body {
  background: var(--bg-grad);
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;          /* header stays top, footer stays bottom */
  -webkit-font-smoothing: antialiased;
}