:root{
  --space-unit: 0.5rem; /* equivalente a 8px */
  --wrap-width: clamp(320px, 88vw, 1740px);
  --wrap-columns: 12;
  --wrap: calc(var(--wrap-width) / 16 * 1rem);
  --wrap-gap: calc(20 / 16 * 1rem);
  --column-width: calc(var(--wrap-width) / var(--wrap-columns) - var(--wrap-gap));
  
  --width-full: 1 / -1;
  --width-wrap: wrap-start / wrap-end;
  
  --six-column: calc(var(--column-width) * 6 + var(--wrap-gap) * 5);
  --nine-column: calc(var(--column-width) * 9 + var(--wrap-gap) * 8);
  
  --z-alert:   9000;
  --z-modal:   8000;
  --z-overlay: 7000;

  --space-half: calc(var(--space-unit) / 2);
  --space-1x: calc(var(--space-unit) * 1);
  --space-2x: calc(var(--space-unit) * 2);
  --space-3x: calc(var(--space-unit) * 3);
  --space-4x: calc(var(--space-unit) * 4);
  --space-5x: calc(var(--space-unit) * 5);
  --space-6x: calc(var(--space-unit) * 6);
  --space-7x: calc(var(--space-unit) * 7);
  --space-8x: calc(var(--space-unit) * 8);
  --space-9x: calc(var(--space-unit) * 9);
  --space-10x: calc(var(--space-unit) * 10);
  --space-20x: calc(var(--space-unit) * 20);


  --space-nano: calc(var(--space-unit) * 1);
  --space-xxs: calc(var(--space-unit) * 2);
  --space-xs: calc(var(--space-unit) * 3);
  --space-sm: calc(var(--space-unit) * 4);
  --space-md: calc(var(--space-unit) * 6);
  --space-lg: calc(var(--space-unit) * 7);
  --space-xl: calc(var(--space-unit) * 9);
  --space-2xl: calc(var(--space-unit) * 12);
  --space-3xl: calc(var(--space-unit) * 13);
  --space-4xl: calc(var(--space-unit) * 16.5);
  --space-5xl: calc(var(--space-unit) * 21.5);


  --font-size-xxs: calc(12 / 16 * 1rem); /* 12px */
  --font-size-xs: calc(14 / 16 * 1rem); /* 14px */
  --font-size-sm: calc(16 / 16 * 1rem); /* 16px */
  --font-size-md: calc(24 / 16 * 1rem); /* 24px */
  --font-size-lg: calc(34 / 16 * 1rem); /* 34px */
  --font-size-xl: calc(46 / 16 * 1rem); /* 46px */
  --font-size-2xl: calc(54 / 16 * 1rem); /* 54px */
  --font-size-3xl: calc(76 / 16 * 1rem); /* 76px */
  --font-size-ultra: clamp(var(--font-size-xl), 8vw, calc(120 / 16 * 1rem)); /* 120px */

  --border-radius-sm: 0.3em;
  --border-radius-md: 0.8em;
  --border-radius-lg: 1.2em;

  --font-family-accent: "GT Flexa", sans-serif;
  --font-family-base: "Bricolage", sans-serif;

  --velocity-fast: 0.2s;
}