/* andocreativo · Spacing, radius, shadow, motion tokens */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---- Radii ----
   * The brand is geometric and friendly. Controls use generous, pill-leaning
   * radii echoing the rounded terminals of the logotype. Sharp 0 corners are
   * reserved for full-bleed color blocks.
   */
  --radius-none: 0;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ---- Shadows ----
   * Soft, warm, low-contrast. Shadows are tinted with the ink-warm hue, never
   * pure black. Elevation is subtle — the brand prefers flat color + line.
   */
  --shadow-sm: 0 1px 2px rgba(22,17,12,0.06);
  --shadow-md: 0 4px 16px rgba(22,17,12,0.08);
  --shadow-lg: 0 12px 40px rgba(22,17,12,0.12);
  --shadow-brand: 0 10px 30px rgba(177,28,36,0.22);

  /* ---- Borders ---- */
  --border-width: 1.5px;
  --border-width-bold: 2.5px;

  /* ---- Motion ----
   * Calm and "metódico". Quick, eased, no bounce. Hover = slight lift +
   * color shift; press = settle down (translateY + deeper color).
   */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.45, 0, 0.25, 1);     /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   400ms; /* @kind other */

  /* ---- Layout ---- */
  --container:    1200px;
  --container-sm: 760px;
}