/* =========================================================
   GD Project Solutions — Spacing, radius, elevation, borders, layout
   4-based spacing. Radius capped at 8px. Very sober elevation.
   ========================================================= */

:root {
  /* ---------- Spacing / 4-base scale ---------- */
  --s-0:  0;          /* @kind spacing */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  28px;        /* gutter intermediate */
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ---------- Radius / max 8px (hard cap) ---------- */
  --r-0:    0;         /* @kind radius */
  --r-1:    2px;
  --r-2:    4px;
  --r-3:    6px;
  --r-4:    8px;        /* hard cap */
  --r-full: 999px;

  /* ---------- Elevation / very sober ---------- */
  --e-0: none;         /* @kind shadow */
  --e-1: 0 1px 0 rgba(28,28,30,.06);
  --e-2: 0 1px 2px rgba(28,28,30,.06), 0 0 0 1px rgba(28,28,30,.04);
  --e-3: 0 4px 12px rgba(28,28,30,.08), 0 0 0 1px rgba(28,28,30,.04);
  --e-card: 0 1px 0 rgba(28,28,30,.03);
  --e-float: 0 24px 56px rgba(0,0,0,.18);

  /* ---------- Borders ---------- */
  --b-hairline:    1px solid var(--line);
  --b-strong:      1px solid var(--line-strong);
  --b-on-dark:     1px solid var(--line-on-dark);
  --b-copper:      1px solid var(--copper-500);
  --b-copper-soft: 1px solid rgba(196,93,44,.35); /* @kind other */

  /* ---------- Layout ---------- */
  --container-narrow: 880px;
  --container-base:   1180px;
  --container-wide:   1360px;
  --gutter:           28px;
  --nav-h:            64px;
  --tap-min:          44px;        /* WCAG 2.5.8 / mobile minimum */

  /* ---------- Breakpoints (reference) ----------
       sm  ≥ 640
       md  ≥ 900
       lg  ≥ 1200
     ------------------------------------------- */
}

@media (max-width: 899px) {
  :root { --gutter: 16px; }
}