:root {
  /* COLORES */
  /* basicos */
  --color-blanco: #fff;
  --color-negro: #212121;

  /* ESPACIDADO  */
  --espaciado-0: 0;
  --espaciado-2: 2px;
  --espaciado-4: 4px;
  --espaciado-8: 8px;
  --espaciado-12: 12px;
  --espaciado-16: 16px;
  --espaciado-20: 20px;
  --espaciado-24: 24px;
  --espaciado-28: 28px;
  --espaciado-32: 32px;
  --espaciado-36: 36px;
  --espaciado-40: 40px;
  --espaciado-44: 44px;
  --espaciado-48: 48px;
  --espaciado-52: 52px;
  --espaciado-56: 56px;
  --espaciado-60: 60px;
  --espaciado-64: 64px;
  --espaciado-72: 72px;
  --espaciado-84: 84px;
  --espaciado-128: 128px;
  --espaciado-256: 256px;
  --espaciado-512: 512px;

  /* BORDER */
  /* border-width */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;

  /* border-radius */
  --border-radius-0: 0;
  --border-radius-1: 1px;
  --border-radius-2: 2px;
  --border-radius-4: 4px;
  --border-radius-8: 8px;
  --border-radius-12: 12px;
  --border-radius-16: 16px;
  --border-radius-50: 50px;
  --border-radius-9999: 9999px;

  /* TOPOGRAFIA */
  /* pesos */
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;

}

@media (prefers-color-scheme: light) {
  :root {
    /* COLORES */
    /* semanticos */
    --color-primario: hsl(198, 58%, 18%);
    --color-secundario: hsl(182, 50%, 36%);

    --color-fondo-pagina: #fff;
    --color-texto-primario: #212121;
    --color-texto-secundario: #4D4D4D;
    --color-texto-terciario: #737373;
    --color-texto-cuaternario: #9A9A9A;
    --color-exito-claro: #E8F6ED;
    --color-exito: #166534;
    --color-advertencia-claro: #F6EEDE;
    --color-advertencia: #854d0e;
    --color-error-claro: #FCEAEA;
    --color-error: #B01E1E;
    --color-notificacion-claro: #EAF0FD;
    --color-notificacion: #1E4FBC;


  }
}

@media (prefers-color-scheme: dark) {
  :root {
    /* COLORES */
    /* semanticos */
    --color-primario: hsl(198, 38%, 48%);
    --color-secundario: hsl(182, 30%, 66%);

    --color-fondo-pagina: #212121;
    --color-texto-primario: hsl(0, 0%, 90%);
    --color-texto-secundario: #9A9A9A;
    --color-texto-terciario: #737373;
    --color-texto-cuaternario: #4D4D4D;
    --color-exito-claro: #173624;
    --color-exito: #3FCF6B;
    --color-advertencia-claro: #3B3217;
    --color-advertencia: #F2B83D;
    --color-error-claro: #431B1B;
    --color-error: #EE6D6D;
    --color-notificacion-claro: #18294A;
    --color-notificacion: #5B8DFF;
  }
}