/* ==========================================================================
   EFFECTS — radii, borders, shadows, gradients, motion
   The brand leans soft & tactile: generously rounded corners, gentle warm
   shadows (never hard black), and the signature teal→blue "resonance" wash.
   ========================================================================== */
:root {
  /* ---- Radii — friendly, rounded (workbook step-badges, callouts) -------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;    /* cards */
  --radius-xl:  26px;    /* feature panels, step-badges */
  --radius-2xl: 36px;
  --radius-pill:999px;
  --radius-blob:42% 58% 60% 40% / 45% 45% 55% 55%;  /* organic motif shape */

  /* ---- Borders ----------------------------------------------------------- */
  --border-width: 1px;
  --border-accent-width: 4px;   /* the orange left-rule on callouts/quotes */

  /* ---- Shadows — warm, soft, layered (tinted toward ink, not pure black) - */
  --shadow-xs: 0 1px 2px rgba(36, 37, 42, 0.06);
  --shadow-sm: 0 2px 6px rgba(36, 37, 42, 0.08);
  --shadow-md: 0 8px 20px rgba(36, 37, 42, 0.10);
  --shadow-lg: 0 18px 40px rgba(36, 37, 42, 0.14);
  --shadow-badge: 0 6px 14px rgba(44, 95, 119, 0.28);  /* teal badge lift */
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Signature gradients ---------------------------------------------- */
  --grad-resonance:  linear-gradient(150deg, var(--teal-400) 0%, var(--blue-600) 100%);
  --grad-orange:     linear-gradient(150deg, var(--orange-400) 0%, var(--orange-600) 100%);
  --grad-p2o-logo:   linear-gradient(135deg, var(--blue-400) 0%, var(--blue-600) 100%);
  --grad-warm-field: linear-gradient(160deg, var(--orange-400) 0%, var(--orange-500) 55%, var(--orange-600) 100%);

  /* ---- Motion — quick, eased, never bouncy in product UI ----------------- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */
  --dur-fast: 130ms;   /* @kind other */
  --dur-med:  220ms;   /* @kind other */
  --dur-slow: 380ms;   /* @kind other */
}
