/* ============================================================
   SPACING · RADII · BORDERS · SHADOWS · MOTION
   ============================================================ */
:root {
  /* Spacing scale */
  --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;

  /* Social canvas margins (1080 canvas) */
  --canvas-margin: 72px;

  /* Radii — the brand is architectural: mostly square. */
  --radius-none: 0;
  --radius-sm: 4px;       /* buttons, tags */
  --radius-pill: 999px;   /* CTA pills, icon circles */

  /* Borders */
  --border-hairline: 1px solid rgba(255,255,255,0.18); /* @kind other */
  --border-accent: 2px solid var(--brand-accent);
  --divider-height: 4px;          /* ember divider under titles: 3–5px */
  --divider-width: 96px;

  /* Icon circles (feature rows) */
  --icon-circle-size: 88px;
  --icon-circle-stroke: 2.5px;

  /* Shadows — soft, warm, used sparingly on light surfaces */
  --shadow-card: 0 8px 28px rgba(28,28,28,0.14);
  --shadow-deep: 0 20px 60px rgba(0,0,0,0.45);

  /* Motion — calm, cinematic */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 300ms; /* @kind other */
}

a { color: var(--brand-accent); text-decoration: none; }
a:hover { color: var(--brand-accent-hot); }