/* ===========================================================================
   The Attention Experiment — Radii, shadows, borders, motion
   Soft, rounded, friendly. Generous corner radii echo the Baga letterforms
   and the circular brand icon. Shadows are soft and low-contrast (navy-tinted).
   =========================================================================== */
:root {
  /* Corner radii — rounded & friendly */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;    /* default control / card radius   */
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --radius-pill: 999px; /* buttons, chips, tags lean pill  */
  --radius-circle: 50%;

  /* Borders */
  --border-width: 1px;
  --border-width-strong: 2px;

  /* Shadows — soft, navy-tinted, never harsh black */
  --shadow-xs: 0 1px 2px rgba(0, 36, 79, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 36, 79, 0.07);
  --shadow-md: 0 6px 18px rgba(0, 36, 79, 0.09);
  --shadow-lg: 0 14px 34px rgba(0, 36, 79, 0.12);
  --shadow-xl: 0 28px 60px rgba(0, 36, 79, 0.16);
  /* Brand-tinted lift for primary / accent surfaces */
  --shadow-brand: 0 10px 26px rgba(0, 71, 171, 0.26);
  --shadow-gold: 0 10px 26px rgba(255, 179, 0, 0.30);

  /* Focus ring */
  --focus-ring-width: 3px;
  --focus-ring-color: rgba(0, 194, 199, 0.55); /* turquoise */

  /* Motion — gentle, calm; nothing jarring (it's a mindfulness brand) */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */
  --ease-soft: cubic-bezier(0.34, 1.2, 0.64, 1);  /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur-base: 200ms;  /* @kind other */
  --dur-slow: 360ms;  /* @kind other */
}