/* ============================================================
   BrockDev — Spacing, radius, shadow & motion tokens
   ============================================================ */
:root {
  /* ───────── Spacing scale (4px base) ───────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ───────── Radius ───────── */
  --radius-sm:   6px;    /* chips, tags, small buttons */
  --radius-md:   8px;    /* buttons, inputs */
  --radius-lg:   10px;   /* CTAs, demo links */
  --radius-xl:   12px;   /* cards (BrockDev) */
  --radius-2xl:  14px;   /* cards (PitBox) / panels */
  --radius-3xl:  18px;   /* product cards / contact panel */
  --radius-app:  26px;   /* app-icon emblem tile */
  --radius-pill: 999px;  /* status pills, fully round */

  /* ───────── Shadows ───────── */
  --shadow-sm:   0 1px 2px rgba(21,23,28,.05);             /* light raise */
  --shadow-md:   0 6px 24px -8px rgba(21,23,28,.14);       /* light hover */
  --shadow-dark-sm:   0 1px 2px rgba(0,0,0,.4);            /* dark raise */
  --shadow-dark-card: 0 2px 8px rgba(0,0,0,.35);
  --shadow-lift: 0 18px 50px -20px rgba(0,0,0,.7);         /* hero card / video */
  --shadow-glow: 0 0 0 1px rgba(232,184,0,.35), 0 8px 24px -8px rgba(232,184,0,.25);
  --shadow-glow-btn:  0 8px 22px -10px rgba(232,184,0,.6); /* gold CTA glow */

  /* ───────── Borders ───────── */
  --border-width: 1px;
  --rail-width:   4px;     /* series accent left-rail / discord-embed rail */
  --nav-rule:     2px;     /* gold underline on app nav */

  /* ───────── Focus ───────── */
  --focus-shadow: 0 0 0 .2rem var(--focus-ring);

  /* ───────── Container widths ───────── */
  --container-marketing: 1180px; /* portfolio max-width */
  --container-pricing:   980px;  /* pricing / focused content */
  --container-app:       1320px; /* admin panel fluid cap */

  /* ───────── Motion ───────── */
  --ease:       cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --dur-fast:   .12s; /* @kind other */
  --dur:        .15s; /* @kind other */
  --dur-slow:   .25s; /* @kind other */
  --hover-lift: translateY(-1px); /* @kind other */
}