/* ============================================================
   Cillus.app — Spacing, radii, shadows, borders, motion
   Blueprint signature: small radii + hard offset shadows.
   ============================================================ */
:root {
  /* Spacing scale — 4px base */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* Radii — deliberately tight (engineering / spec-sheet feel) */
  --radius-xs:   2px;
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 999px;

  /* Borders */
  --border-hairline: 1px;
  --border-regular:  1.5px;   /* framed components */
  --border-heavy:    2px;

  /* Shadows — signature hard offset + soft elevation */
  --shadow-hard-sm: 2px 2px 0 var(--bone-900);
  --shadow-hard:    4px 4px 0 var(--bone-900);
  --shadow-hard-lg: 6px 6px 0 var(--bone-900);
  --shadow-hard-flame: 4px 4px 0 var(--flame-500);

  --shadow-soft-sm: 0 1px 2px rgba(22, 20, 15, 0.06);
  --shadow-soft:    0 1px 2px rgba(22, 20, 15, 0.05), 0 8px 24px rgba(22, 20, 15, 0.06);
  --shadow-soft-lg: 0 2px 4px rgba(22, 20, 15, 0.06), 0 18px 48px rgba(22, 20, 15, 0.10);

  /* Focus ring */
  --ring-width: 3px;
  --ring: 0 0 0 var(--ring-width) color-mix(in srgb, var(--focus-ring) 45%, transparent);

  /* Blueprint grid background (use as background-image) */
  --grid-bg: linear-gradient(var(--grid-line) 1px, transparent 1px),
             linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  --grid-size: 22px 22px;

  /* Motion — quick, precise, no bounce */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 110ms; /* @kind other */
  --dur-base: 170ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */

  /* Layout */
  --container: 1200px;
  --container-narrow: 760px;
}