/* O!Sapiens — Spacing, radius, shadow, layout
   The system is flat and confident: generous negative space, square-ish geometry
   inherited from the logo (the O is a superellipse, the wordmark sits on a hard grid).
   Shadows are used sparingly — light, neutral, never coloured glows. */

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

  /* ---- Radius ---- */
  --radius-none: 0px;
  --radius-sm:   8px;
  --radius-md:   16px;   /* default card / input */
  --radius-lg:   24px;
  --radius-xl:   40px;   /* large content blocks, image masks */
  --radius-pill: 999px;  /* buttons, tags */
  --radius-o:    44%;    /* the O superellipse feel for image masks */

  /* ---- Border ---- */
  --border-width: 2px;   /* @kind spacing */
  --border-width-thick: 3px; /* @kind spacing */

  /* ---- Shadow (neutral, restrained) ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);
  --shadow-focus: 0 0 0 3px rgba(12,9,255,0.35);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: var(--space-5);

  /* social formats */
  --format-story-w: 1080px;
  --format-story-h: 1920px;
  --format-post-w:  1080px;
  --format-post-h:  1440px;
  --format-square:  1080px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
}