/* ============================================================
   Fareon — Spacing, radius, shadow, motion tokens
   8px base grid.
   ============================================================ */

:root {
  /* ---- Spacing scale (8px 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;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---- Radius --------------------------------------------- */
  /* The brand leans crisp & architectural — radii are modest.
     Pills used for chips/toggles; logomark squares stay sharp. */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

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

  /* ---- Elevation / shadow --------------------------------- */
  /* Soft, cool-tinted shadows (navy base, never warm/black). */
  --shadow-xs:  0 1px 2px rgba(3, 29, 68, 0.06);
  --shadow-sm:  0 1px 3px rgba(3, 29, 68, 0.08), 0 1px 2px rgba(3, 29, 68, 0.04);
  --shadow-md:  0 4px 12px rgba(3, 29, 68, 0.10), 0 2px 4px rgba(3, 29, 68, 0.06);
  --shadow-lg:  0 12px 28px rgba(3, 29, 68, 0.14), 0 4px 10px rgba(3, 29, 68, 0.07);
  --shadow-xl:  0 24px 56px rgba(3, 29, 68, 0.18), 0 8px 18px rgba(3, 29, 68, 0.09);
  --shadow-mint: 0 8px 28px rgba(2, 248, 196, 0.30); /* teal/mint glow for accents */
  --shadow-focus: 0 0 0 3px rgba(128, 148, 221, 0.45);

  /* ---- Layout --------------------------------------------- */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1100px;
  --container-xl:  1320px;
  --gutter:        var(--space-6);

  /* ---- Motion --------------------------------------------- */
  /* Calm, clinical, precise — short eases, no bounce. */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.1, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
  --dur-slower: 520ms; /* @kind other */
}