/* ============================================================
   Genie — Spacing, radii, borders, shadows
   Depth comes from SOFT HAIRLINES, SOFT SHADOWS, large rounded corners,
   and a signature BLUE GLOW under accent CTAs — NOT from hard outlines.
   Pills/chips are fully round; panels carry big 16–20px radii.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* section rhythm */
  --section-pad-y: 72px;
  --gutter:        56px;
  --gutter-mobile: 20px;
  --max-width:     1280px;

  /* ---- Radii (Appcharge: rounded-2xl = 16px on panels, full pills) ---- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   12px;   /* inputs */
  --radius-xl:   16px;   /* cards */
  --radius-2xl:  16px;   /* feature / panel cards */
  --radius-3xl:  20px;   /* hero / big panels */
  --radius-pill: 9999px; /* buttons, chips, icon buttons, dots */

  /* ---- Borders (soft hairlines; on dark they are translucent white) ---- */
  --border-hairline: 1px solid var(--night-line);    /* hairline on dark card */
  --border-bold:     1.5px solid rgba(255,255,255,0.85); /* @kind color */ /* outline-button on dark */
  --border-divider:  1px solid var(--night-line);
  --border-width:    1px;

  /* ---- Shadows (soft elevation + blue brand glow) ---- */
  --shadow-none: none;
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-soft: 0 10px 34px rgba(0, 0, 0, 0.40);    /* default dark card lift */
  --shadow-pop:  0 28px 70px rgba(0, 0, 0, 0.55);    /* modal / dropdown */
  --shadow-dark: 0 28px 70px rgba(0, 0, 0, 0.60);    /* deep dark panels */
  --shadow-glow: 0 16px 50px rgba(69, 179, 253, 0.45); /* blue accent glow */
  --shadow-glow-sm: 0 8px 26px rgba(69, 179, 253, 0.40);
  --ring-glow:   0 0 0 1px rgba(69,179,253,0.42), 0 0 28px rgba(69,179,253,0.35);
  --glass-inset: inset 0 1px 0 rgba(255,255,255,0.08); /* glossy top highlight */

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-std:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:  140ms; /* @kind other */
  --dur-base:  220ms; /* @kind other */
}