/* ============================================================
   SPACING · RADII · SHADOWS · LAYOUT — Coronel Lenise / AGIR
   ============================================================ */

:root {
  /* --- Spacing scale (4px base) --- */
  --sp-0:  0; /* @kind spacing */
  --sp-1:  0.25rem;   /* 4 */
  --sp-2:  0.5rem;    /* 8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  3rem;      /* 48 */
  --sp-8:  4rem;      /* 64 */
  --sp-9:  6rem;      /* 96 */

  /* --- Radii — institucional, levemente arredondado --- */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;   /* botões, etiquetas */
  --r-lg:   16px;   /* cards */
  --r-xl:   24px;   /* painéis / número plate */
  --r-pill: 999px;  /* "RIO DE JANEIRO", chips */

  /* --- Borders --- */
  --bw-hair: 1px;
  --bw-rule: 2px;    /* fios dourados finos */
  --bw-bold: 4px;    /* fios dourados de destaque */

  /* --- Shadows — sóbrias, institucionais --- */
  --shadow-sm:   0 1px 2px rgba(3,19,46,0.10);
  --shadow-md:   0 6px 18px rgba(3,19,46,0.14);
  --shadow-lg:   0 18px 44px rgba(3,19,46,0.22);
  --shadow-gold: 0 8px 24px rgba(232,163,23,0.30);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,0.06);

  /* --- Layout --- */
  --container:    1200px;
  --container-sm: 760px;
  --gutter:       var(--sp-5);

  /* --- Motion --- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */
}