/* =============================================================================
   Pixelboop — Spacing, radius, grid, motion & shadow tokens
   ============================================================================= */

:root {
  /* ---- Spacing scale (rem) -------------------------------------------------- */
  --pb-space-1: 0.25rem;
  --pb-space-2: 0.5rem;
  --pb-space-3: 0.75rem;
  --pb-space-4: 1rem;
  --pb-space-5: 1.5rem;
  --pb-space-6: 2rem;
  --pb-space-7: 3rem;
  --pb-space-8: 4rem;
  --pb-space-9: 6rem;   /* case-study section padding                          */

  /* ---- Layout --------------------------------------------------------------- */
  --pb-content-max: 1200px;   /* nav + footer width cap                         */
  --pb-prose-max: 900px;      /* long-form reading column                       */
  --pb-section-pad: 4rem 1.5rem;

  /* ---- Pixel grid (the core motif) ----------------------------------------- */
  --pb-pixel-size: 16px;   /* desktop cell; 8px mobile → 18px large desktop     */
  --pb-pixel-gap: 1px;     /* hairline seam between cells                       */
  --pb-pixel-radius: 1px;  /* near-square, barely rounded                       */
  --pb-grid-cols: 44; /* @kind other */
  --pb-grid-rows: 24; /* @kind other */ /* the app canvas is locked to 44×24 */

  /* ---- Corner radius -------------------------------------------------------- */
  --pb-radius-pixel: 1px;  /* grid cells                                        */
  --pb-radius-xs: 3px;     /* tags, keycaps                                     */
  --pb-radius-sm: 4px;     /* buttons, inputs, the default                      */
  --pb-radius-md: 6px;     /* form fields, social chips                         */
  --pb-radius-lg: 8px;     /* cards                                             */
  --pb-radius-xl: 12px;    /* large panels                                      */
  --pb-radius-pill: 999px; /* capsule tooltips                                  */

  /* ---- Motion --------------------------------------------------------------- */
  --pb-ease: ease; /* @kind other */
  --pb-ease-out: ease-out; /* @kind other */
  --pb-dur-instant: 0.05s; /* @kind other */ /* pixel color change            */
  --pb-dur-fast: 0.1s;     /* @kind other */ /* button press scale             */
  --pb-dur-quick: 0.15s;   /* @kind other */ /* hover color shifts             */
  --pb-dur-base: 0.2s;     /* @kind other */ /* card lift, focus glow          */
  --pb-dur-slow: 0.3s;     /* @kind other */ /* slide-down reveals             */
  --pb-dur-gradient: 4s;   /* @kind other */ /* rainbow gradient cycle         */

  /* ---- Elevation (shadows are SOFT and accent-tinted, used sparingly) ------- */
  --pb-shadow-card: 0 8px 24px rgba(78, 205, 196, 0.10);  /* teal-tinted hover */
  --pb-shadow-glow-focus: 0 0 0 3px rgba(78, 205, 196, 0.10); /* focus ring     */
  --pb-shadow-none: none;
}