/* ============================================================
   SPACING, RADIUS, SHADOW, MOTION — Happy Technologies
   ============================================================ */
:root {
  /* ---- Spacing scale (rem) ---- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ---- Layout ---- */
  --container-max: 1400px;     /* nav + content max width */
  --container-pad: 3rem;       /* horizontal page padding */
  --section-pad-y: 4rem;       /* vertical rhythm between sections */

  /* ---- Corner radii ---- */
  --radius-sm: 8px;            /* chips, inputs, small controls */
  --radius-md: 12px;           /* buttons, form fields */
  --radius-lg: 20px;           /* cards, panels */
  --radius-xl: 28px;           /* large feature surfaces */
  --radius-pill: 50px;         /* pills, badges */
  --radius-full: 9999px;       /* avatars, circular icons */

  /* ---- Shadows (cool navy-tinted, soft) ---- */
  --shadow-sm: 0 2px 8px rgba(30, 42, 74, 0.06);
  --shadow-md: 0 4px 16px rgba(30, 42, 74, 0.08);
  --shadow-lg: 0 8px 32px rgba(30, 42, 74, 0.1);
  --shadow-xl: 0 16px 48px rgba(30, 42, 74, 0.14);
  /* Colored glows for primary/coral buttons */
  --shadow-accent: 0 8px 24px rgba(92, 195, 251, 0.25);
  --shadow-coral: 0 4px 16px rgba(255, 117, 100, 0.3);
  --shadow-coral-hover: 0 8px 24px rgba(255, 117, 100, 0.4);

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 2px;  /* outlined buttons, focused inputs */

  /* ---- Motion ---- */
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
  --hover-lift: -4px;          /* card hover translateY */
  --press-lift: -2px;          /* button hover translateY */

  /* ---- Effects ---- */
  --blur-glass: blur(12px); /* @kind other */
  --glass-bg: rgba(255, 255, 255, 0.92);
}