/* ============================================================
   Nativ — Spacing, radii, borders, shadows
   ============================================================ */

:root {
  /* ---- Spacing scale (px) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 88px;   /* section vertical rhythm */

  /* ---- Layout ---- */
  --wrap-max:   1280px;  /* @kind spacing */
  --wrap-prose: 1120px;  /* @kind spacing */
  --gutter:     24px;

  /* ---- Radii ---- */
  --r-sm:   8px;    /* chips, small buttons, inline code */
  --r-md:   10px;   /* buttons */
  --r-lg:   12px;   /* nested panels */
  --r-xl:   14px;   /* cards, code panels, windows */
  --r-2xl:  16px;   /* large frames */
  --r-pill: 99px;   /* pills, badges, dots */

  /* ---- Borders ---- */
  --bw:        1px;
  --bw-accent: 2px;   /* status box left rule, blockquote */
  --bw-strong: 3px;

  /* ---- Shadows ---- */
  --shadow-card:    0 24px 60px -32px rgba(0, 0, 0, .85);
  --shadow-window:  0 30px 80px -30px rgba(0, 0, 0, .80), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  --shadow-frame:   0 20px 60px -20px rgba(0, 0, 0, .70);
  --shadow-btn:     0 0 0 1px rgba(255, 255, 255, .08), 0 8px 28px -10px rgba(255, 140, 90, .35);
  --shadow-btn-hi:  0 0 0 1px rgba(255, 255, 255, .14), 0 10px 34px -8px rgba(255, 140, 90, .50);

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(.2, .7, .2, 1); /* @kind other */
  --dur-fast:  .15s; /* @kind other */
  --dur-mid:   .2s; /* @kind other */
  --dur-rise:  .7s; /* @kind other */
}