/* ============================================================
   SPACING, RADII, BORDERS, SHADOWS, LAYOUT & MOTION
   Generous whitespace, one idea per section.
   Airy section rhythm (96px), max content width 1140px.
   ============================================================ */

: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;
  --space-24:  96px;    /* Default section rhythm */
  --space-32:  128px;   /* Major section breaks */

  /* --- Layout --- */
  --content-max:   1140px;   /* Max content width */
  --content-narrow: 720px;   /* Prose / single-column reading width */
  --gutter:        24px;     /* Page side padding (mobile) */
  --gutter-lg:     48px;     /* Page side padding (desktop) */
  --section-y:     96px;     /* Vertical section padding */

  /* --- Radii (soft, never pill-shaped UI) --- */
  --radius-sm:  4px;
  --radius:     8px;     /* Cards, inputs, buttons */
  --radius-lg:  12px;    /* Larger media panels */
  --radius-xl:  20px;    /* Feature imagery */
  --radius-full: 999px;  /* Avatars, WhatsApp FAB */

  /* --- Borders --- */
  --border-hairline: 1px solid var(--color-border);
  --border-soft:     1px solid var(--color-border-soft);
  --border-width:    1px;

  /* --- Shadows (soft, diffuse, low-contrast; never harsh) --- */
  --shadow-xs:   0 1px 2px rgba(1, 52, 64, 0.04);
  --shadow-sm:   0 2px 8px rgba(1, 52, 64, 0.05);
  --shadow:      0 6px 20px rgba(1, 52, 64, 0.07);
  --shadow-lg:   0 16px 40px rgba(1, 52, 64, 0.10);
  --shadow-focus: 0 0 0 3px rgba(0, 144, 160, 0.28);

  /* Protection gradient: legibility for white text over imagery */
  --scrim-bottom: linear-gradient(to top, rgba(1,52,64,0.55) 0%, rgba(1,52,64,0.18) 45%, rgba(1,52,64,0) 100%); /* @kind other */
  --scrim-full:   linear-gradient(to bottom, rgba(1,52,64,0.28) 0%, rgba(1,52,64,0.32) 100%); /* @kind other */

  /* --- Motion (calm, unhurried; gentle fades, never bouncy) --- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast:   160ms; /* @kind other */
  --dur:        260ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
}