/* ============================================================
   TriTechne — Spacing, radius, shadow, layout tokens
   8px base grid. Sharp-to-soft radii (engineered, not pill-heavy).
   Shadows are cool/navy-tinted, never warm.
   ============================================================ */
:root {
  /* ---- Spacing scale (8px grid) ----------------------------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* ---- Radius (restrained — squared engineering feel) ------- */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

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

  /* ---- Shadows (cool navy-tinted) --------------------------- */
  --shadow-xs: 0 1px 2px rgba(10,23,48,0.06);
  --shadow-sm: 0 2px 6px rgba(10,23,48,0.08);
  --shadow-md: 0 8px 20px rgba(10,23,48,0.10);
  --shadow-lg: 0 18px 40px rgba(10,23,48,0.14);
  --shadow-focus: 0 0 0 3px var(--focus-ring);
  /* accent glow used on primary CTAs over dark grounds */
  --shadow-brand: 0 8px 24px rgba(78,137,253,0.35);

  /* ---- Layout ----------------------------------------------- */
  --container:      1200px;
  --container-wide: 1360px;
  --container-text: 720px;
  --gutter:         var(--space-5);

  /* ---- Motion ----------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:      120ms; /* @kind other */
  --dur-base:      200ms; /* @kind other */
  --dur-slow:      360ms; /* @kind other */
}