/* KH Design System · Space, shape, depth tokens (KH Design Language §4)
 * Borders do the separating. Shadows are reserved for hover lift and modal backdrops.
 */
:root {
  /* --- Spacing rhythm (loose 4px base) --- */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 12px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 22px;
  --space-7: 28px;
  --space-8: 36px;
  --space-9: 40px;

  /* --- Section rhythm (personal site doubled, file 01 §3.1) --- */
  --section-gap: 140px;            /* 96-140px desktop */
  --section-gap-min: 96px;
  --section-gap-mobile: 80px;      /* 64-80px mobile */

  /* --- Layout --- */
  --content-max: 1180px;
  --page-pad: 28px;
  --measure: 680px;                /* article measure, playbook step 5 */

  /* --- Radii (v2: softer, friendlier) --- */
  --radius: 16px;                  /* cards, containers */
  --radius-lg: 22px;               /* banner, feature blocks */
  --radius-button: 12px;
  --radius-input: 10px;            /* small inputs, chips */
  --radius-pill: 99px;
  --radius-dialog: 20px;
  --radius-monogram: 12px;
  --radius-monogram-lg: 16px;      /* gate / hero scale */

  /* --- Borders --- */
  --border-width: 1px;
  --border-dashed: 1.5px;          /* add/empty card */

  /* --- Depth (v2: soft elevation adds modern life) --- */
  --shadow-sm: 0 1px 2px rgba(16, 19, 34, .04), 0 3px 10px rgba(16, 19, 34, .05);
  --shadow-md: 0 8px 24px rgba(16, 19, 34, .08);
  --shadow-lg: 0 24px 60px rgba(16, 19, 34, .16);
  --shadow-glow: 0 18px 50px rgba(124, 92, 255, .30); /* gradient glow under banner / CTAs */
  --shadow-hover: var(--shadow-md);
  --shadow-modal: 0 30px 80px rgba(16, 19, 34, .32);
  --scrim: rgba(16, 19, 34, .5);   /* dialog backdrop */
  --lift-y: -3px;                  /* translateY on hover */

  /* --- Grids --- */
  --grid-min: 320px;
  --grid-gap: 18px;

  /* --- Focus --- */
  --focus-width: 2px;
  --focus-offset: 2px;
}