html {
   scroll-behavior: smooth;
}

:root {
   /* =========================
     BACKGROUND
  ========================= */
   --color-bg-primary: #ffffff;
   --color-bg-secondary: #fafafa;
   --color-bg-tertiary: #f5f5f5;
   --color-bg-four: #f5f5f5;
   --color-bg-inverse: #3687f246;

   /* =========================
     TEXT
  ========================= */
   --color-text-primary: #15100e;
   --color-text-secondary: #231815;
   --color-text-muted: #c7c0be;
   --color-text-inverse: #ffffff;

   /* =========================
     BORDER
  ========================= */
   --color-border-default: #e2dedd;
   --color-border-subtle: #f4f2f2;
   --color-border-strong: #a89f9c;
   --color-border-focus: #3687f2bc;

   /* =========================
     ACTION
  ========================= */
   --color-action-primary: #3688f2;
   --color-action-primary-hover: #2974d6;
   /* Azul más intenso y sólido (minimalista) */
   --color-action-primary-active: #1f60b8;
   /* Aún más profundo en el click */

   /* =========================
     STATUS
  ========================= */
   --color-success: #36b26c;
   --color-warning: #f5a000;
   --color-error: #df0615;
   --color-info: #4096ff;
}

:root {
   /* =========================
     SPACING
  ========================= */
   --space-0: 0px;
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 24px;
   --space-6: 32px;
   --space-7: 40px;
   --space-8: 48px;
   --space-9: 64px;
   --space-10: 80px;
   --space-11: 96px;
   --space-12: 120px;
   --space-13: 160px;

   /* =========================
     BORDER
  ========================= */
   --border-1: 1px;
   --border-2: 2px;

   /* =========================
     RADIUS
  ========================= */
   --radius-2: 4px;
   --radius-4: 8px;
   --radius-6: 16px;
   --radius-full: 999px;

   --nav-container-width: 90%;
}