/* ============================================================
   Trepa't — Radii, borders, shadows, motion
   The identity is sticker / screen-print / enamel-pin: thick petrol
   outlines, slightly rounded corners, and flat "hard" offset shadows
   rather than soft blurred ones.
   ============================================================ */

:root {
  /* Corner radii — friendly but not bubbly */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* Signature outline (badge/sticker edge) */
  --outline-hair:   1.5px solid var(--border-subtle);
  --outline:        2px solid var(--border-strong);
  --outline-bold:   3px solid var(--border-strong);

  /* Hard / flat offset shadows — the sticker look */
  --shadow-hard-sm: 2px 2px 0 0 var(--petrol-700);
  --shadow-hard:    4px 4px 0 0 var(--petrol-700);
  --shadow-hard-lg: 6px 6px 0 0 var(--petrol-700);
  --shadow-hard-coral: 4px 4px 0 0 var(--coral-400);

  /* Soft elevation — used lightly for floating UI (menus, toasts) */
  --shadow-sm:  0 1px 2px rgba(3,65,83,0.10);
  --shadow-md:  0 6px 18px -6px rgba(3,65,83,0.22);
  --shadow-lg:  0 18px 40px -12px rgba(3,65,83,0.30);

  /* Focus */
  --ring:       0 0 0 3px rgba(26,102,120,0.45);

  /* Motion — quick, slightly springy; no long lazy fades */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur:         200ms; /* @kind other */
  --dur-slow:    320ms; /* @kind other */
}