/* ALT Construction — Spacing, radius, borders & elevation tokens
 * 8px base scale with practical one-off alignment values.
 * The system is mostly FLAT: depth comes from surface alternation, warm stone
 * blocks, rounded media cards and thin hairline borders — not heavy shadows.
 */
:root {
  /* Spacing scale */
  --sp-0: 0px; /* @kind spacing */
  --sp-1: 2px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
  --sp-7: 24px;
  --sp-8: 32px;
  --sp-9: 40px;
  --sp-10: 56px;
  --sp-11: 64px;
  --sp-12: 80px;       /* section rhythm */
  --sp-13: 120px;      /* large section breathing room */

  /* Radius scale */
  --radius-xs: 4px;    /* small thumbnails, inputs */
  --radius-sm: 8px;    /* chips, small cards */
  --radius-md: 14px;   /* cards, grouped blocks */
  --radius-lg: 22px;   /* signature media-card radius */
  --radius-xl: 30px;   /* filter / topic pills */
  --radius-pill: 999px;/* CTA buttons, status dots */

  /* Borders */
  --border-width: 1px;
  --border-hairline: 1px solid var(--hairline);
  --border-soft: 1px solid var(--border-light);

  /* Elevation — used sparingly. Most surfaces are flat or bordered. */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(20, 30, 24, 0.05);
  --shadow-card: 0 2px 10px rgba(20, 30, 24, 0.06);
  --shadow-media: 0 18px 50px rgba(12, 36, 28, 0.16);  /* lifted media card only */

  /* Layout */
  --container-max: 1240px;
  --container-pad: 24px;
}