/* ============================================================
   Peregrine OS — Spacing, Radius, Elevation, Motion
   The product layer is softer and rounder than the angular
   brand system: pill controls, generous 16px card radii, and
   a low, soft "floating card" shadow tinted with deep teal.
   ============================================================ */

:root {
  /* --- Spacing scale (4px base) ----------------------------------- */
  --space-0:  0;
  --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;

  /* --- Radii (soft — rounder than the brand mark) ----------------- */
  --radius-xs:   6px;
  --radius-sm:   8px;   /* small chips, time slots */
  --radius-md:   12px;  /* inputs, controls, dropdowns */
  --radius-lg:   16px;  /* default card */
  --radius-xl:   18px;  /* large panels */
  --radius-pill: 999px; /* buttons, chips, segmented control, toggles */

  /* --- Borders ---------------------------------------------------- */
  --border-width:       1px;   /* @kind spacing */ /* cards, dividers */
  --border-width-input: 1.5px; /* @kind spacing */ /* inputs, secondary buttons */
  --border-width-accent: 3px;  /* @kind spacing */ /* card top/left accent rule */
  --border-width-callout: 4px; /* @kind spacing */ /* callout left border */

  /* --- Elevation (soft, deep-teal-tinted, low spread) ------------- */
  --shadow-xs:    0 1px 2px rgba(12, 52, 56, 0.04);
  --shadow-card:  0 1px 2px rgba(12, 52, 56, 0.04), 0 6px 20px rgba(12, 52, 56, 0.05);
  --shadow-raised:0 1px 2px rgba(12, 52, 56, 0.04), 0 8px 24px rgba(12, 52, 56, 0.06);
  --shadow-pop:   0 10px 28px rgba(12, 52, 56, 0.16);

  /* --- Layout ----------------------------------------------------- */
  --container-kit: 1180px;
  --gutter:        var(--space-6);

  /* --- Motion (quick, purposeful — no bounce) --------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --dur-fast:      120ms; /* @kind other */
  --dur-base:      160ms; /* @kind other */
  --dur-slow:      240ms; /* @kind other */
}